0

Разметка сделана с использованием flexbox, требуется разместить небольшой текст на картинке посередине, изображение задается не через CSS, а с помощью тега img. Картинка адаптивна.

Я сам сделал так, меня устроил бы и такой результат, но для того чтобы сделать горизонтальное центрирование мне надо установить width:100%;, а когда я к блокам добавляю padding по бокам, то происходит конфликт и появляется горизонтальная полоса прокрутки.

HTML:

<body>
  <div class="container">
    <div class="block1">
     <div class="absolute-test"><p> left-block</p></div>
        <img src="https://psv4.vk.me/c414118/u112479091/docs/b2bc3bcffd63/black.jpg?extra=2C4lMpqBZzRRZVnloHrq3VpNpBu_KrYYGCgCrppMf7isOEl6G-gbopaFJsDsQtToMbt2-w7w1NTdrRgJQrGpQK8bXVjLwFUgWpbg-Gbej9u4LKgGbQ" alt="" class="img-responsive" />
    </div>
    <div class="block2">
     <div class="absolute-test"> <p>right-block</p></div>
      <img src="https://psv4.vk.me/c414118/u112479091/docs/b2bc3bcffd63/black.jpg?extra=2C4lMpqBZzRRZVnloHrq3VpNpBu_KrYYGCgCrppMf7isOEl6G-gbopaFJsDsQtToMbt2-w7w1NTdrRgJQrGpQK8bXVjLwFUgWpbg-Gbej9u4LKgGbQ" alt="" class="img-responsive"/>
    </div>
  </div>
</body>

CSS:

html, body {
    margin: 0;
    padding: 0;
}
.container{
    display: flex;  
}
.block1{
    position: relative;
    width:50%;
    background:red;
    padding-left:10px;
    padding-right:5px;
}
.block2{
    position: relative;
    width:50%;
    background:blue;
    padding-left:5px;
    padding-right:10px;
}
.img-responsive{
    display: block;
    max-width: 100%;
    height: auto; 
}
.absolute-test{
    position: absolute;
    width: 100%;
    text-align: center;
    top: 35%;
    color: white;
    font-size: 3.5em;
    z-index: 100;
}

http://codepen.io/Fess/pen/QyZXjd?editors=1100

2
  • Так добавьте overflow: hidden; и не будет полосы прокрутки. 8 фев 2016 в 1:47
  • Спасибо за ответ, не могли бы еще подсказать может существует более удобный способ вертикального центрирования? 8 фев 2016 в 9:05

1 ответ 1

2

Про FlexBox: на русском и английском

Поддержка FlexBox caniuse.com

введите сюда описание изображения

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-flow: row wrap;
}
.container .block1,
.container .block2 {
  position: relative;
  display: flex;
  flex: 1 0 50%;
  min-width: 320px;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
}
.container .block1 .text,
.container .block2 .text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.container .block1 .text p,
.container .block2 .text p {
  color: #fff;
  font-size: 2em;
  font-weight: 400;
  text-transform: uppercase;
}
.container .block1 .img-responsive,
.container .block2 .img-responsive {
  width: 100%;
  height: auto;
}
<body>
  <div class="container">
    <div class="block1">
      <div class="text"><p>left-block</p></div>
      <img src="http://placeimg.com/640/480/any/1" alt="" class="img-responsive" />
    </div>
    <div class="block2">
      <div class="text"><p>right-block</p></div>
      <img src="http://placeimg.com/640/480/any/2" alt="" class="img-responsive" />
    </div>
  </div>
</body>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.