How to align multiple divs in another?

问题

So here's my HTML:

...
<div class="header">
<div class="left">
</div>
<div class="center">
<img class="logo" src="linktomyimage.com/image.png" />
</div>
<div class="right">
</div>
</div>

<!-- And the desired result is: -->
[ [LEFT] [CENTER] [RIGHT] ]

The only CSS I have is:

* {
margin: 0px;
}
img.logo {
display: block;   margin-left: auto;   margin-right: auto; 
}

I really need help to align the three divs on the whole page. Also div.center must have the same size as the image, aka width - 800px and height - 600px.

回答1:

It looks much more like a table than divisions to me...

<table class="header"><tr>
    <td class="left"></td>
    <td class="center">
        <img class="logo" src="linktomyimage.com/image.png" />
    </td>
    <td class="right"></td>
</tr></table>

Think about so CSS afterwards :

table.header{
    width: 100%;
    border-collapse: collapse;
}

table.header td{
    vertical-align: top;
    border: 1px solid #404040;
}

table.header td.center{
    width: 800px;
    height: 600px;
}

This is just a code sample, get the idea, and adapt to your own needs ^^

回答2:

Add these classes to your css

.left
{
 display:inline-block;
 width:25%;
}
.center
{
 display:inline-block;
 width:50%;
}
.right
{
 display:inline-block;
 width:25%;
}

回答3:

With the following markup, 2 solutions come to mind:

MARKUP

<div class="header">
    <div class="left">
        Some left test
    </div>
    <div class="center">
    <img class="logo" src="http://placehold.it/50x50" />
    </div>
    <div class="right">
        Some right text
    </div>
</div>

Solution #1

Float left and right sides and use display-block on the center

FIDDLE

Css

.header
{
    text-align: center;
    width:100%;
}
.left
{
    float:left
}
.right
{
    float:right;
}
.center
{
    display:inline-block;
}

Solution #2

Use text-align: justify; on the header element.

Then stretch the content to take up 100% width

FIDDLE

CSS

.header
{
    text-align: justify;
    width:100%;
}
.header > div
{
    display: inline-block;
}
.header:after {
    content: '';
    display: inline-block;
    width: 100%;
}

回答4:

.left, .centre, .right {
float:left;
}

What float:left does is, is it'll make each container organize itself from the left, so you get:

[LEFT]-[CENTRE]-[RIGHT]

来源：https://stackoverflow.com/questions/17642662/how-to-align-multiple-divs-in-another

标签

css

html

alignment