Выровнять 3 divs в строке div с текстом в центре

Как и в случае с How to align 3 divs (left/center/right) inside another div?, я пытаюсь выровнять три div в родительском div. Добавленная сложность заключается в том, что каждый div содержит изображение, текст и ссылку. Я хотел бы, чтобы они были выровнены ссылку так:Выровнять 3 divs в строке div с текстом в центре

[[LEFT-IMG] [CENTER-IMG] [RIGHT-IMG]] 
    text   text   text 
    link   link   link

Однако, ближе я могу получить это:

[[LEFT-IMG] [CENTER-IMG] [RIGHT-IMG]] 
text    text    text 
link    link    link

С текстом и ссылками, отражающими выравнивание изображения.

Вот мой HTML:

<div class="row"> 
    <div class="col-4 left"> 
     <img src="http://placehold.it/250x150" alt="Thing 1"> 
     <p>THING 1</p> 
     <a href="somedomain.com">somedomain.com</a> 
    </div> 
    <div class="col-4 center"> 
     <img src="http://placehold.it/250x150" alt="Thing 2"> 
     <p>THING 2</p> 
     <a href="somedomain.com">somedomain.com</a> 
    </div> 
    <div class="col-4 right"> 
     <img src="http://placehold.it/250x150" alt="Thing 3"> 
     <p>THING 3</p> 
     <a href="somedomain.com">somedomain.com</a> 
    </div> 
    </div>

Мой CSS:

.row { 
    margin: 0 auto; 
    max-width: 1000px; 
    width: 100%; 
    display: flex; 
    right: 0; 
    text-align: center; 
    flex-wrap: wrap; 
} 

.left { 
    display: inline-block; 
    text-align: left; 
} 

.right { 
    display: inline-block; 
    text-align: right; 
} 

.center { 
    display: inline-block; 
    margin: 0 auto; 
} 
.col-4 { 
    width: 33.33%; 
}

Обратите внимание, что они находятся в сетке DIV со следующими CSS:

.grid { 
    margin: 0 auto; 
    max-width: 1000px; 
    display: flex; 
    flex-wrap: wrap; 
}

У меня есть ощущение, в моей структуре есть что-то принципиально неправильное, но я не уверен, что. Очень новое в этом.

Любые идеи?

ОБНОВЛЕНИЕ: Вот JSFiddle, показывающий текущий прогресс. http://jsfiddle.net/ljhennessy/j8jrn719/

Ключ здесь в том, что я хотел бы, чтобы левое и правое изображения были выровнены до красной границы с обеих сторон.

источник

2015-06-21 ljhennessy

Можете ли вы сделать скрипку? – potashin

@ljhennessy, что вам нужно? это первый пример, который вы показали в вопросе? – divy3993

Да. Левое и правое изображения должны быть выровнены по их соответствующим сторонам строки. Текст и ссылка внизу должны быть выровнены под изображениями. – ljhennessy

Просто удалите класс рядом с col-4 класс.

Вот Jsfiddle link.

Это будет выглядеть следующим образом:

<div class="row"> 
    <div class="col-4"> 
    <img src="http://placehold.it/250x150" alt="Thing 1"> 
    <p>PROJECT 1</p> 
    <a href="somedomain.com">somedomain.com</a> 
    </div> 
    <div class="col-4"> 
    <img src="http://placehold.it/250x150" alt="Thing 2"> 
    <p>THING 2</p> 
    <a href="somedomain.com">somedomain.com</a> 
    </div> 
    <div class="col-4"> 
    <img src="http://placehold.it/250x150" alt="Thing 3"> 
    <p>THING 3</p> 
    <a href="somedomain.com">somedomain.com</a> 
    </div> 
</div>

Для установки изображения с колонками просто добавить этот код в ваш CSS:

img { 
    width: 100%; 
}

Надеется, что это помогает.

источник

2015-06-21 14:18:01

Спасибо за ссылку! Раньше я не использовал Jsfiddle, очень полезный. – ljhennessy

Я создал JSFiddle https://jsfiddle.net/ljhennessy/j8jrn719/. Проблема (как вы можете видеть) заключается в том, что изображения по-прежнему не выровнены слева и справа от строки (т. Е. Красные границы). – ljhennessy

Просто добавьте стиль к своему изображению. ширина: 100%. Я уже обновил ссылку jsfiddle. –

Просто измените свойство text-allign на центр .left и .right

источник

2015-06-21 14:31:03

Выровнять 3 divs в строке div с текстом в центре

ответ

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