Question

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

我如何确保第二个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;在那堂课上。你想要的所有div都在中间，你必须添加display：table-cell;和vertical-align：middle;

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

就是这样:)）

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

1 个答案: