Horizonzal and vertical alignment with CSS [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 9 years ago.

Improve this question

I need to make a header in HTML/CSS that should look like this:

There are 3 sections containind different elements, always both vertically und horizontally centered. The middle section should be able to receive arbitrary number of images. Depending on user actions, new images will be added.

Any suggestions?

Answer 1

Here is the fiddle for you:

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/

Hope this helps.

Answer 2

You can use table for construction that layout button all mordern web not using the table instead you can use div and change the display property corresponding to table layout like bellow

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

I have a soultion without table, only with divs: JSFiddle

The vertical-alignment must be done with padding... but i think this is a great start.

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

And here the 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

Simple Code here, Dynamic code

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}