Question

我需要在HTML / CSS中创建一个如下所示的标题：

enter image description here

有3个部分包含不同的元素，总是垂直和水平居中。中间部分应该能够接收任意数量的图像。根据用户操作，将添加新图像。

有什么建议吗？

Answer 1

这是你的小提琴：

HTML：

<table class="table">
    <td id="left"> < Back</td>
    <td id="middle"></td>
    <td id="right"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTx_UltN7oNiHFwk7-pGEkunHaXz8Nk3o3-eKNUHzktoZuM-BT7Pg" /></td>
</table>

<强> CSS：

    .table
{
    width:100%;
    height:88px;
    text-align: center;
    border:1px solid black;
}
#left
{
    width:100px;
    height:88px;
        border:1px solid black;
}

#middle
{
    width:auto;
    height:88px;
        border:1px solid black;
}

#middle img
{
    width:40px;
    height:40px;
}

#right
{
    width:100px;
    height:88px;
        border:1px solid black;
}

<强> JS：

    document.getElementById("middle").innerHTML += '<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTx_UltN7oNiHFwk7-pGEkunHaXz8Nk3o3-eKNUHzktoZuM-BT7Pg" />' ;
document.getElementById("middle").innerHTML += '<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTx_UltN7oNiHFwk7-pGEkunHaXz8Nk3o3-eKNUHzktoZuM-BT7Pg" />' ; // and so on....

http://jsfiddle.net/M7Lj5/2/

希望这有帮助。

Answer 2

您可以使用表格来构建布局按钮所有现代网站不使用表格而不是您可以使用div并更改对应于表格布局的显示属性，如下面

<强> HTML：

<div class="table">
<div class="row">
    <div class="cell1">&lt;Button</div>
    <div class="cell2">
        <img src="http://donaldmurrayexpat.com/wp-content/uploads/2014/02/Cool-2.jpg"/>
        <img src="http://donaldmurrayexpat.com/wp-content/uploads/2014/02/Cool-2.jpg"/>
        <img src="http://donaldmurrayexpat.com/wp-content/uploads/2014/02/Cool-2.jpg"/>
        <img src="http://donaldmurrayexpat.com/wp-content/uploads/2014/02/Cool-2.jpg"/>
    </div>
    <div class="cell3">&lt;Button</div>
</div>
</div>

<强> CSS：

.table{
width:"100%";
border: 1px solid;
}
img{
width:30px;
height:30px;
}
.row{
display:table-row;
width:100%;
    background:red;
    text-align:center;
}
.cell1{
display:table-cell;
    height:20px;
     vertical-align:middle;
    border: 1px solid;
    padding:20px;
}
.cell2{
display:table-cell;
    height:20px;
     vertical-align:middle;
    border: 1px solid;
    padding:20px;
    width:100%;
}
.cell3{
display:table-cell;
    height:20px;
     vertical-align:middle;
    border: 1px solid;
    padding:20px;
}

Demo Here

Answer 3

我有一个没有表的解决方案，只有div：JSFiddle

垂直对齐必须使用填充...但我认为这是一个很好的开始。

<div id="header">
  <div id="left_header"><p>< back</p></div>
  <div id="middle_header">img img img</div>
  <div id="right_header"><p>image</p></div> 
</div>

这里是CSS：

#header {
        width: 100%;
        height: 88px;
        background-color: red;
    }
    #header div {
        float: left;
    }
    #left_header {
        width: 100px;
        height: 88px;
        background-color: green;
        display:table-cell;
        text-align: center;
        vertical-align:middle;
    }
    #right_header {
        width: 100px;
        height: 88px;
        background-color: green;
        display:table-cell;
        text-align: center;
        vertical-align:middle;
    }
    #middle_header {
        width: calc(100% - 200px);
        height: 88px;
        background-color: yellow;
        display: table-cell;
        text-align: center;
    }

Answer 4

简单代码，动态代码

http://jsfiddle.net/jeyashri_shri/q5z4B/7/

HTML：

 <table border="1" width="100%" height="50%">
 <tr >
 <td>Left</td>
 <td>
 <img src=""/>
 <img src=""/>
 <img src=""/>
 <img src=""/>
 </td>
 <td>Right</td>
 </tr>

CSS：

 table td{border-left:0;border-top:0;border-bottom:0;text-align:center;}
 table td:nth-child(1){width:100px;}
 table td:nth-child(3){border-right:0;width:100px;}  
 td img{width:50px;height:50px;display:inline}

使用CSS进行水平和垂直对齐

4 个答案: