В приведенном ниже коде у меня есть 3 divs, где 1-й и 3-й divs - это таблицы, которые заполняются текстом разной длины (определяется пользователем) для пользователя. Второй div - это изображение. Когда пользователь отправляет и текст заполняется в таблицы, центральное изображение (2-й div) перемещается в зависимости от текста. Например, если самое длинное слово из обеих таблиц находится в левой таблице, изображение будет сдвигаться вправо вместе с правой таблицей. Если самое длинное слово в каждой таблице одинаковой длины, ничего не сдвинется.
Как я могу обеспечить, чтобы второй div оставался центрированным независимо от длины текста в divs по обе стороны от него?
<div class="text_tables" id="left_table">
<table>
<tr><td><span class = "output render" id = "text1"></span></td></tr>
<tr><td><span class = "output render" id = "text2"></span></td></tr>
<tr><td><span class = "output render" id = "text3"></span></td></tr>
<tr><td><span class = "output render" id = "text4"></span></td></tr>
</table>
</div>
<div class="text_tables">
<img id="doge1" src="{{ url_for('static', filename='img/doge1.png') }}">
<img id="doge2" src="{{ url_for('static', filename='img/doge2.jpg') }}">
<img id="doge3" src="{{ url_for('static', filename='img/doge3.jpg') }}">
</div>
<div class="text_tables" id="right_table">
<table>
<tr><td><span class = "output render" id = "text6"></span></td></tr>
<tr><td><span class = "output render" id = "text7"></span></td></tr>
<tr><td><span class = "output render" id = "text8"></span></td></tr>
<tr><td><span class = "output render" id = "text9"></span></td></tr>
</table>
</div>
Вот весь CSS, который влияет на вышеперечисленное:
.text_tables {
display: inline-block;
text-align: center;
}
#left_table{
margin-right: 50px;
}
#right_table{
margin-left: 50px;
}
div.jumbo {
padding: 10px 0 30px 0;
background-color: #eeeeee;
}
Так скажи мне, это прекрасно? :) http://jsfiddle.net/UqRAc/
Вы должны поместить все это в один div, после этого giv, который разделит некоторый класс и добавит display: table; на этом классе. Все вы хотите, чтобы центр был посередине, вы должны добавить отображение: table-cell; и выравнивание по вертикали: среднее;
.tables {
display: table;
}
#left_table {
width:30%;
display: table-cell;
}
#image-set {
display: table-cell;
vertical-align: middle;
}
#right_table {
display: table-cell;
width: 30%;
}
И это все :)
text-align: center;
#image-set
в приведенном выше коде Джозефина, и он будет держать ваши изображения по центру. Что касается таблиц не на каждой стороне, я смотрю на скрипку, и они находятся на каждой стороне соответственно с изображениями div в мертвой точке. Возможно, какой-то другой CSS может конфликтовать на вашей стороне?