Центрирования несколько изображений над текстом

-1

У меня было немного трудностей, пытаясь получить изображение по центру над текстом, что-то вроде этого:Центрирования несколько изображений над текстом

Descriptive image goes here.

Я сделал несколько попыток с помощью таблиц, но не может заставить изображения оставаться центрированными.

источник

2013-07-03 Marc Cunningham

Спасибо за ответы до сих пор и извинения, потому что я не ясно, в чем я просил, я сказал, «над», когда я имел в виду выше, когда речь идет к центрированный текст, что привело к некоторой путанице. http://www.albamclothing.com Я хотел бы создать эффект, похожий на «Встретить нас»/найти нас/следовать за нами/спросить нас/последние статьи с изображениями, расположенными над текстом. Надеюсь, это стало более ясным. –

Настройка свойства отображения изображения для блокировки/встроенного блока позволяет использовать его как обычный объект, чтобы вы могли установить маржу или отступы. Если вы хотите, чтобы центр его можно просто использовать display: block; margin: 0 auto;

источник

2013-07-03 13:08:53 cybrox

Я сделал JSFIDDLE пример здесь: Demo

Вы можете использовать отступы на вашем фоне, поэтому текст всегда будет находиться в центре. Также установлено display: block; или inline-block;, поэтому вы можете использовать margins, padding.

<div class="wrapper"> 
    <div class="color"> 
     <h1>Some big text</h1> 
     <p>Some small text</p> 
    </div> 
</div> 

.color{ 
    // background-color: red; <-- used in the jsfiddle 
    background-image: url('yourimage.jpg'); 
    display: inline-block; 
    text-align: center; 
    padding: 40px; 
    color: #fff; 
} 

h1{ 
    font-size: 80px 
}

источник

2013-07-03 13:12:15

Apoligies Я не был ясно в том, что я просил, что привело к некоторой путанице, –

Итак, что именно вы имеете в виду? –

Я хотел бы создать эффект, похожий на Meet Meet/find us/follow us/ask us/latest items text с изображениями, расположенными над текстом. albamclothing.com –

<div id="bannerinfo" style="color: white; width: 100%; height: 40px; background-color:#9fd2cd; text-align:center; line-height:40px;"> 
         <p>Sale Now On - Click here to find out more</p></a> 
</div>

попробовать по этому

источник

2013-07-03 13:13:44 Tombeau

Центрирования несколько изображений над текстом

ответ

Смежные вопросы