Question

我正在尝试制作一个4分割着陆页，其下方有一个图标和一个文字，在每个div内水平和垂直居中。我尝试了各种各样的解决方案，其中没有一个似乎有用，所以我发布了迄今为止的内容。这是一个jsfiddle http://jsfiddle.net/W8gs3/

HTML：

    <div id="rect1"> 

            <p><img src="icon.png"/></p>
            <p>Sound</p>

    </div>
    <div id="rect2">rect2</div>
    <br />
    <div id="rect3">rect3</div>
    <div id="rect4">rect4</div>
    <br />

CSS：

    /* CSS Document */

    html, body {
    width:   100%;
    height: 100%;
    padding:     0;
    margin: 0;
    }

    div {
    padding:0;
    margin: 0;
    width:50%;
    height:50%;
    float: left;
    }

    #rect1 {
        background: #0066FF;
    }

    #rect2 {
        background-color: #CC0033;
    }
    #rect3 {
        background-color: #669966;
    }
    #rect4 {
        background-color: #FFCC33;
    }
    br {
    clear:   left;
    }

Answer 1

如果您在html中添加了div：

声音

<div id="rect2" class="outer">
    <div class="inner">rect2</div>
</div>
<div id="rect3" class="outer">
    <div class="inner">rect3</div>
</div>
<div id="rect4" class="outer">
    <div class="inner">rect4</div>
</div>

您可以使用以下样式：

div.outer {
    padding:0;
    margin: 0;
    width:50%;
    height:50%;
    float: left;
    display:table;
}
div.inner {
    display:table-cell;
    width:100%;
    height:100%;
    text-align:center;
    vertical-align:middle;
}

Example

Answer 2

根据我的理解，你想将img与中心对齐，下面是我的建议

将img标记内联到您想要居中对齐的位置。

#rect1 p img {
display: inline;
width:30px;
height:30px;

}
#rect1 p  {
text-align:center;
}

希望这能解决您的问题

Answer 3

您可以使用下面的CSS使图像和文本居中。检查 DEMO 。

#rect1, #rect1 p img {
    background: #0066FF;
    display:inline-block;
    text-align:center;
}
#rect1 p{
    margin:0;padding:0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Answer 4

试试这个

div {
  padding:0;
  margin: 0;
  width:50%;
  height:50%;
  float: left;
  text-align: center; /*add this*if it is necessary in the middle of all the elements*/
}

Answer 5

添加此代码

<强> HTML

<section> 
<div id="rect1"> 
 <p><img src="icon.png"/></p>
 p>Sound</p>
</div>
<div id="rect2">rect2</div>
</section>
<section> 
<div id="rect3">rect3</div>
<div id="rect4">rect4</div>
</section>

<强> CSS

html, body {
    width:   100%;
    height: 100%;
    padding:     0;
    margin: 0;
    }

    section{
        position:relative; height:50%; width:100%; display:table;
    }

    div {
    padding:0;
    margin: 0;
    width:50%;
    height:50%;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    }

    #rect1 {
        background: #0066FF;
    }

    #rect2 {
        background-color: #CC0033;
    }
    #rect3 {
        background-color: #669966;
    }
    #rect4 {
        background-color: #FFCC33;
    }

这是一个工作小提琴http://jsfiddle.net/W8gs3/14/

Answer 6

如果古老的浏览器支持不是问题，您可以使用css3 flexbox，如下所示：

div {
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 padding:0;
 margin: 0;
 width:50%;
 height:50%;
 float: left;
}

JSFiddle

如何将图像和文本置于div内？

6 个答案: