Блог

Я использую HTML 5 с CSS 3. Сценарий выглядит следующим образом.

 <div style="margin-top: 50px; background-color: red; padding: 10px 0px 10px 0px; width: 100%">
<span>This text must be in center of div</span>
<a href="somepage.html"><img src="/image.jpg" alt="This image must be on left side of div"/></a>
</div>
  

Текст и изображение должны быть в одну строку. Как мне это сделать?

Пример

Чтобы расположить элемент относительно его родительского элемента, вы присваиваете родительскому элементу любое значение position, кроме static (обычно relative ) и дочернего элемента position: absolute .

В соответствии с вашим встроенным CSS…

 <div style="margin-top: 50px; background-color: red; padding: 10px 0px 10px 0px; width: 100%; text-align: center; position: relative;">
    This text must be in center of div
    <img src="/image.jpg" alt="This image must be on left side of div" style="position: absolute; left: 0;"/>
</div>
  

jsFiddle.

Однако вам следует рассмотреть возможность использования классов, идентификаторов и внешней таблицы стилей.

SPAN и IMG являются встроенными элементами, поэтому по умолчанию они должны отображаться рядом друг с другом. Если вы хотите, чтобы изображение отображалось слева, а текст SPAN после него…

 <img /><span />
  

Как насчет этого? Я отредактировал код на основе вашего комментария. Предостережение заключается в том, что высота строки тега P должна быть установлена на высоту div, чтобы расположить P по центру как по вертикали, так и по горизонтали.

     <style>
.myDiv{
    background-image: url('../pathToImage/image.jpg');
    background-repeat: no-repeat;
    background-position: center left;   
    margin-top: 50px; 
    background-color: red; 
    width: 100%;
    text-align: center;
    height: 250px;
}
.myDiv P
{
    line-height:250px;

}
</style>
<div class="myDiv">
        <p>This text must be in center of div.</p>
</div>