Блог

Главная - Вопросы по программированию - Выровнять изображение и текст по центру по левому краю на одном уровне внутри div?

Выровнять изображение и текст по центру по левому краю на одном уровне внутри div?

#html #css #image

#HTML #css #изображение

Вопрос:

 HTML:
<br />
    <div class="UpperTitle">
        <img src="Images/CableSolve Logo.jpg" align="absmiddle" padding-right: 10px;" /> CableSolve Web Dashboard - Version 0.1.1
    </div>
<br />

CSS:
.UpperTitle
{
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #CEDEF4;
    font-weight:bold;
    color: #224499;
    border-radius: 10px;
}

В настоящее время у меня есть эта настройка. Я хотел бы расположить баннер на том же уровне, что и текст, но я хотел бы, чтобы баннер располагался в левой части экрана с текстом в центре экрана.

Похоже, что мои единственные варианты — либо переместить изображение (потребуется тонна жестко закодированных значений, чтобы это выглядело нормально), обернуть текст в a, <div> чтобы конкретно расположить его по центру (что приводит к тому, что он опускается ниже изображения), либо центрировать как изображение, так и текст — что я и делаю в настоящее время.

Я нашел много различных руководств по этому вопросу, но они, похоже, либо перемещают изображение, используя простой макет веб-сайта, либо выравнивают текст по вертикали, либо считают приемлемым сочетание баннер / текст по центру.

Мысли?

Заранее спасибо.

Ответ №1:

Почему бы просто не использовать CSS position? как это.

Приветствия

Комментарии:

1. Этот мне понравился. 🙂 Красиво, просто, и я точно понял, что происходит. Спасибо! Ничего не имею против ответа Snippet, я уверен, что они оба работают относительно одинаково.

Ответ №2:

поместите текст в div и добавьте:

 height: /*height of parent*/
line-height:  /*height of parent*/