3

内部に 2 つの要素を含むこのコンテナーがあります: http://jsfiddle.net/scQa2/1/ (JSFiddle が適切に中央に配置されていないように見えるため、コードをコピーして貼り付けるのが最善です)

test.html

<div id="main">
    <img src="http://images.fanpop.com/images/image_uploads/Flower-Wallpaper-flowers-249402_1024_768.jpg" id="image"/>
    <div id="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>​

test.css

#main {
    width: 410px;
    margin: auto;
}

#image {
    max-width: 200px;
    width: 100%;
    float: left;
    border: 1px solid blue;
}

#text {
    max-width: 200px;
    width: 100%;
    float: left;
    border: 1px solid red;
}​

私がやるべきことは、2 つの要素が両方とも max-width を使用しているため、コンテナーを中央に配置するのではなく、コンテンツをコンテナーの中央に配置することです。

コンテナーのマージンを auto に設定し、特定の幅 (たとえば 410px、200px の 2 つの最大幅にちょうど十分) に設定すると、次のようになります。

コンテナのセンタリング

ただし、子要素が最大幅を下回ると、コンテナの幅が変更されていないため、整列しません。

縮小画像

できればJavaScriptを使用せず、純粋なCSS/HTMLのみを使用して、2つの子要素が常に水平方向に中央に配置されるようにする方法はありますか?

4

1 に答える 1

5

これを試してください、それがあなたが求めているものであることを願っています...

#main {
                border: 1px solid red;
                display: block;
                width: 90%;
                margin: 0 auto;
                text-align: center;
            }
            .image{
                vertical-align: top;

                border: 1px solid blue;
                display: inline-block;
            }
            .image img {
                max-width: 200px;
            }

            #text {
                vertical-align: top;
                max-width: 200px;
                border: 1px solid red;
                display: inline-block;
            }

html

<div id="main">
            <p class="image">
                <img src="http://images.fanpop.com/images/image_uploads/Flower-Wallpaper-flowers-249402_1024_768.jpg"/>
            </p>

    <p id="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div>
于 2012-12-19T00:55:45.217 に答える