How to center an image and text underneath inside a div? - html

Question

I'm trying to make a 4 split landing page with an icon and a text underneath it, centered both horizontally and vertically inside each div. I tried various solutions, non of which seems to work, so i'm posting what i have so far. Here's a 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

If you add an additional div into your html:
Sound
<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>
You can use the following styles:
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

According to my understanding you want to align img to center, below is my suggestion
Make the img tag inline which you want to center align.
#rect1 p img {
display: inline;
width:30px;
height:30px;
}
#rect1 p {
text-align:center;
}
hope this will solve your problem

Answer 3

Add this code
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;
}
Here is a working fiddle http://jsfiddle.net/W8gs3/14/

Answer 4

you can make center the image and text using the below CSS. check the 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 5

If ancient browser support is not an issue, you can use css3 flexbox as follows:
div {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:0;
margin: 0;
width:50%;
height:50%;
float: left;
}
JSFiddle

Answer 6

try this
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*/
}