1

クラスの課題用に小さなウェブページを書いています。画像を配置する予定の列と段落の間にテキストを保持したい。特に寸法を変更せずに画像を列内に保持するにはどうすればよいですか?

CSS

body {
        background-image:url("Some Image");
        background-size:cover;
        background-repeat:none;
    }

    .body-box {
                display:block;
                margin-left:33%;
                margin-right:33%;
                padding-left:3%; 
                padding-right:3%;
                border-left:4px solid black;  
                border-right:4px solid black;

                word-wrap:break-word; 
                text-align:justify;
                font-family:'Lato:300',serif; 

                color:black;
                background-color:white; 
            }

HTML

<div class="body-box">  

        <h1>Some Text</h1>

        <a href="Some Image"><img src="Some Link" 
        alt="Something Vague" width="auto" height="auto" align="center"></a>

        <h2>Some Text</h2>
        <p>Some Paragraph</p>
4

4 に答える 4

1

サイト内のすべての画像を中央に配置できるということは、

img{
  display:block;
  margin:0 auto;
}

1 つだけ (この) 画像を意味する場合は、

.image1 img{
  display:block;
  margin:0 auto;
}

このフィドルを参照してください。

サイズ変更が必要な場合は、

フィドル

divのサイズを変更して塗りつぶす手段、

フィドル

于 2013-10-23T04:19:00.630 に答える
1

100%代わりに画像の幅と高さを与えるだけですauto

http://jsfiddle.net/XRTba/

于 2013-10-23T04:16:54.527 に答える