Незаурядное размещение div'a - HTML, CSS - Ответ 8341856

@Shakalaka · 14.11.2015, 22:56

Сообщение от Seft

а можно как-нибудь сделать, чтобы структура html осталась та же и флоаты заработали?

Вам с шашечками или ехать? Непонятно что у вас за структура, непонятно какая будет верстка. Методов центрировать что-то вертикально много и все они костыльные за исключением vertical-align в ячейках таблицы. Можете поискать в гугле такого добра там навалом.

Кликните здесь для просмотра всего текста

HTML5

<div class="container">
        <div class="review">
            <div class="clearfix">
                <div class="content">
                    <img src="https://yt3.ggpht.com/-YJ8xwJBnr2U/AAAAAAAAAAI/AAAAAAAAAAA/V-oWRHN1lbc/s100-c-k-no/photo.jpg" alt="">
                        <div  class="centered">какая-то ерунда </div>
                </div>
            </div>  
        </div>
        <div class="review" >
            <div class="clearfix ">
                <div class="content" >
                    <img src="https://yt3.ggpht.com/-YJ8xwJBnr2U/AAAAAAAAAAI/AAAAAAAAAAA/V-oWRHN1lbc/s100-c-k-no/photo.jpg" alt="">
                        <div  class="centered">
                            какая-то ерунда<br>
                            еще ерунда 
                        </div>
                </div>
            </div>  
        </div>
</div>

CSS

html, body{
    margin:0;
    width:100%;
    background:#ccc;
    overflow-x:hidden;
}
.clearfix{
    clear:both;
}
.clearfix:before, .clearfix:after{
    content:" ";
    display:table;
    clear:both;
}
.container{
    width:70%;
    margin:auto;
}
.review{
    background:#fff;
    position:relative;
    margin-bottom:20px;
    text-align:left;
}
.review:after{
    content:" ";
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    background:#fff;
    width:2000px;
}
.review:nth-child(odd):after{
    right:100%;
    left:auto;
}
.review:nth-child(odd) img{
    float:left;
    vertical-align:middle;
}
.review:nth-child(even):after{
    left:100%;
    right:auto;
}
.review:nth-child(even) img{
    float:right;
    vertical-align:middle;
    
}
.content{
    height:100px;
}
.content:before {
    content: '';
    display: inline-block;
    height: 100%; 
    vertical-align: middle;  
}
.centered {
    display: inline-block;
    vertical-align: middle;
 }

http://jsfiddle.net/shakalaka/4qjr2fzu/1/ вот еще один способ

Вернуться к обсуждению:
Незаурядное размещение div'a HTML, CSS

Другие темы раздела
HTML, CSS Подключение CSS https://www.cyberforum.ru/ html/ thread1580731.html Здравствуйте, Подскажите пожалуйста как подключить .css файл к .html странице, если эта страница находится в другой папке, выше по иерархии. При простой команде <link rel="stylesheet" type="text/css" href="styles.css"> он ее не видит. Нужно подключать styles.css к digitalimage.html	HTML, CSS Масштабирование div блоков Здраствуйте столкнулся с проблемой при масштабировании страницы сьезжает div блок название .main вот код css .style { width: 935px; height: 890px; max-width: 1280px; min-width: 940px; border: 2px solid #056767; margin: auto; top: 20px;
HTML, CSS Динамическая таблица. Ширина ячеек таблицы? Привет форумчане. Сразу говорю, что я в HTML ноль, но нужна помощь. В инете нашел следующий код динамической таблицы, но проблема в этом коде в том, что при добавлении строк в таблицу заголовки столбцов свой размер не меняют, а в строках ширина полей для ввода данных не соответствует ширине ячеек. Спецов пру помочь устранить эту проблему. Всем ответившим спасибо. <!DOCTYPE html PUBLIC... https://www.cyberforum.ru/ html/ thread1580674.html	HTML, CSS Сделать пробел под верхней строкой таблицы https://www.cyberforum.ru/ html/ thread1580411.html Есть такая таблица: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> table { width:100%; } .rTop{
Ломается блок при переносе HTML, CSS Хай. Вот тут http://bitloor.com/com.b/ внизу есть блок "Наши работы". Там три картинки. Это макет и написан на html. Я перенёс его сюда switer.xyz на свой движок и почему-то этот блок стал криво отображаться. В чем проблема? спасибо.	HTML, CSS Простенькая задачка, которая снесет вам мозг https://www.cyberforum.ru/ html/ thread1580269.html я уже ни раз встречался с подобными задачками в своей практике и решались они путем переноса блока с помощью js а можно ли реализовать такую верстку используя только css и html5 Ну в принцепе на картинке все показано наглядно: есть 3 объекта если окно больше чем 320px (или поф сколько ) то расположение такое: черный слева салатовый справа вверху зеленый справа внизу когда окно меньше...
HTML, CSS Плавающие блоки https://www.cyberforum.ru/ html/ thread1580257.html Не знал как назвать этот вопрос/проблему. У меня действительно проблема. Искал в интернете, видимо плохо, но нет идей чего бы спросить и поисковика еще. По идее я что-то не так понимаю, объясните пожалуйста. Штука в том что на левом блоке у меня стоит float: left; а правый блок должен свободно отображаться справа, впрочем так и есть, помимо того что правый блок не полностью сьехал вправо....	HTML, CSS В последнем диве Check more posts слово posts съезжает на вторую строку Добрый день, подскажите, пожалуйста, почему при маленьком масштабе в блоке "The blog!" в последнем диве Check more posts слово posts съезжает на вторую строку, ширину блоку увеличила уже не много, т.к. на планшетах и смартфоне тоже съезжало слово на вторую строку, но там теперь все ок. http://musor-uborka.ru/portfolio/ Спасибо
HTML, CSS Hover эффект для картинки Как реализовать такой hover эффект? https://www.cyberforum.ru/ html/ thread1580048.html	HTML, CSS Как установить пробел между блокам контента и футером? код примера <!DOCTYPE html> <html> <head> <title>ПОТОК</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css" /> </head> https://www.cyberforum.ru/ html/ thread1580018.html
HTML, CSS Как сделать чекбокс включенным по-умолчанию? Здравствуйте, программисты ! У меня есть такая проблема: Не могу сделать так чтобы чекбокс по умолчанию был включен. То есть в нем стояла галочка - только открыл страницу там уже стоит галочка ... Заранее спасибо :)	HTML, CSS Градиент не растягивается на 100% по высоте и ширине https://www.cyberforum.ru/ html/ thread1579987.html Значить, прописываю градиент тегу body а он не растягивается на всю ширину и высоту как если просто указать цвет. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body>

	14.11.2015, 22:56