css - 防止可变 div 大小移动居中图像

Question

在下面的代码中，我有 3 个 div，其中第 1 个和第 3 个 div 是在用户提交时填充不同长度(由用户决定)的文本的表格。第二个 div 是图像。当用户提交并将文本填充到表格中时，中心图像(第二个 div)会根据文本移动。例如，如果任一表中最长的单词在左表中，则图像将与右表一起向右移动。如果每个表中最长的单词长度相同，则什么都不会移动。

无论其两侧的 div 中的文本长度如何，我如何确保第二个 div 保持居中？

   <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;
}

Answer 1

所以告诉我这样好吗？ :) http://jsfiddle.net/UqRAc/

你必须把所有的东西放在一个 div 中，然后给那个 div 一些类并添加 display:table;在那个类(class)。所有你想要居中的 div，你必须添加 display: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%;
}

就是这样:)