This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I've recently started doing frontend and I've run into a bit of a problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em; /* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class=header>
<div class="head-title"><p>Amazing Title</p></div>
<div class="head-button"><p>Foo</p></div>
<div class="head-button"><p>Bar</p></div>
</div>
</body>
</html>
You can run the code here. The problem is with aligning the red buttons with the navbar (header). The buttons are supposed to stretch from the top to the bottom of the navbar, but they aren't aligned to the top. This is caused by the head-title element. If the font size is set to 1em, then the problem disappears. Why is this happening? Any help is appreciated.
Set vertical-align: top; on the .head-button:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
/* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
vertical-align: top;
}
body {
background-color: #24272E;
}
<div class=header>
<div class="head-title">
<p>Amazing Title</p>
</div>
<div class="head-button">
<p>Foo</p>
</div>
<div class="head-button">
<p>Bar</p>
</div>
</div>
Try adding vertical-align: top; to .head-button class so the blocks will be aligned to top.
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
vertical-align: top;
}
Try using display:flex css property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
display: flex;
align-items: center;
}
.head-title {
font-size: 1.3em; /* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
margin-right: 8px;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
</style>
</head>
<body>
<div class=header>
<div class="head-title"><p>Amazing Title</p></div>
<div class="head-button"><p>Foo</p></div>
<div class="head-button"><p>Bar</p></div>
</div>
</body>
</html>
Try to use modern solution and !coding not a property such display: inline-block or vertical-align: top that almost is old and obsolete, in this case when you want to put element side by side and align them in a certain row you can use flex on their parents like below example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
display: flex;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
/* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
<div class=header>
<div class="head-title">
<p>Amazing Title</p>
</div>
<div class="head-button">
<p>Foo</p>
</div>
<div class="head-button">
<p>Bar</p>
</div>
</div>
With flex you can control parent and also child alignments! something like justify-content: center; or align-items: center;
Try this
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
/* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}
/** My Code **/
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
width: 260px;
height: auto;
margin: 0 10px;
vertical-align: middle;
}
.head-button {
display: inline-block;
width: 80px;
line-height: 2.5em;
background-color: red;
text-align: center;
}
<div class=header>
<div class="head-title">
<p>Amazing Title</p>
</div>
<div class="head-button">
<p>Foo</p>
</div>
<div class="head-button">
<p>Bar</p>
</div>
</div>
Related
This is my code which works - used vehicle platform - HTML with flex, but isn't quite esthetically pleasing:
body {
font-family: Verdana, sans-serif;
font-size: 16px;
line-height: 18px;
}
header.infog {
background-color: #333;
color: #FFF;
margin-bottom: 25px;
padding: 30px;
}
footer.infog {
background-color: #333;
color: #FFF;
margin-top: 20px;
margin-bottom: 25px;
padding: 10px;
}
.mainwrapper {
border: 2px solid;
display: table;
margin-left: 50px;
width: 900px;
}
.itemwrapper {
display: table-row;
width: 90px;
margin-right: -40px;
}
.itemwrapper1 {
display: table-row;
margin-left: -356em;
width: 100px;
}
.itemwrapper1 img {}
.some-page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
margin-left: 40px;
width: 600px;
color: #333;
margin: 0;
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
padding: 20px;
}
.column1 {
margin-left: 40px;
background-color: blue;
color: #FFF;
margin: 0;
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
padding: 20px;
}
.priceg {
font-size: 29px;
color: red;
padding-left: 500px;
}
.img-nac img {
max-width: 330px;
}
.img-nac1 img {
max-width: 460px;
}
.ncat {
flex-direction: row;
margin-left: -450px;
text-align: right 50px;
}
.ncat1 {
flex-direction: row;
margin-left: -200px;
text-align: right 50px;
}
.at1 {
white-space: nowrap;
margin-top: -20px;
}
.priceh {
margin-left: 180px;
margin-top: -20px;
}
.mainwrapper {
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Car , Van, Caravan Dealer | Quality Used Cars</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<header class="infog">
header
</header>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column1'>
2003 TOYOTA RAV4 2.0 GX
</div>
<div class='column1 priceg'>
£8995
</div>
</div>
<div class='row'>
<div class='column img-nac'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
</div>
<div class='column ncat'>
black
</div>
</div>
</div>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column1'>
2003 TOYOTA RAV4 2.0 GX
</div>
<div class='column1 priceg'>
£8995
</div>
</div>
<div class='row'>
<div class='column img-nac1'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
</div>
<div class='column ncat'>
rowtt
</div>
</div>
</div>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column img-nac'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
</div>
<div class='column at1'>
<h3>2004 TOYOTA RAV4 2.0</h4>
black
</div>
<div class='column priceh'>
<h3>£6000</h4>
</div>
</div>
</div>
<footer class="infog">
footer
</footer>
</body>
</html>
The problem is that I'm trying to make it so that if the image is large it's still alongside the text, like this from my page:
The blue line below is actually a bit of the next image... I didn't screencap well.
I've not figured out how to with the CSS and max-width size to do this, resulting in:
The car description in the second flexbox (column and ncat classes) doesn't show up.
But it works fine with the smaller image; I'm trying to make it big enough for people to see.
This isn't the final version, as I'm adding Roboto font etc. in the CSS, but it's almost working.
I'd much appreciate any advice on how to ensure I can get this to work in flexbox.
Just update your CSS with the following code
body {
font-family: Verdana, sans-serif;
font-size: 16px;
line-height: 18px;
}
header.infog {
background-color: #333;
color: #FFF;
margin-bottom: 25px;
padding: 30px;
}
footer.infog {
background-color: #333;
color: #FFF;
margin-top: 20px;
margin-bottom: 25px;
padding: 10px;
}
.mainwrapper {
border: 2px solid;
display: table;
margin-left: 50px;
width: 900px;
}
.itemwrapper {
display: table-row;
width: 90px;
margin-right: -40px;
}
.itemwrapper1 {
display: table-row;
margin-left: -356em;
width: 100px;
}
.some-page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
margin-left: 40px;
color: #333;
margin: 0;
display: flex;
flex-direction: column;
padding: 20px;
}
.column1 {
margin-left: 40px;
background-color: blue;
color: #FFF;
margin: 0;
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
padding: 20px;
}
.priceg {
font-size: 29px;
color: red;
padding-left: 500px;
}
.img-nac img {
max-width: 330px;
}
.img-nac1 img {
max-width: 460px;
}
.ncat {
flex-direction: row;
text-align: right 50px;
}
.ncat1 {
flex-direction: row;
text-align: right 50px;
}
.at1 {
white-space: nowrap;
margin-top: -20px;
}
.priceh {
margin-left: 180px;
margin-top: -20px;
}
.mainwrapper {
margin-bottom: 20px;
}
I think I'm basically there. I've got a DIV at 200px in height and an inner at 150px. This leaves me 50px for the image caption. I want to then vertically center the text within the remaining 50px.
.captioned {
width: 300px;
height: 200px;
display: flex;
margin: 10px;
background-color: #FFFFFF;
border: solid 4px #000000;
border-radius: 0;
box-sizing: border-box;
overflow: hidden;
}
.captioned-inner {
width: 100%;
margin: 0;
}
.preview {
height: 150px;
width: 100%;
}
.preview-image {
height: 100px;
max-width: 100%;
margin-top: 25px;
margin-bottom: 25px;
}
.info {
padding: 5px;
box-sizing: border-box;
height: 50px;
}
.info-inner {
box-sizing: border-box;
}
.name {
font-family: 'Roboto', sans-serif;
font-size: 25px;
display: block;
margin-top: 0;
margin-bottom: 0;
line-height: 1;
overflow-wrap: anywhere;
}
<div class="captioned">
<div class="captioned-inner">
<div class="preview" style="background-color: #DE16C7 !important">
<img class="preview-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
<div class="info">
<div class="info-inner">
<p class="name">Google</p>
</div>
</div>
</div>
</div>
I hope the code makes sense for what I'm trying to acheive. I'm wondering how I can go about incorporating the padding in the 50px height unless I should vertically center and pad the text but that seems a worse way to do it.
Just use display:flex and align-items:center to vertically align the text
Also as you have given box-sizing:border-box in .captioned class so it would include the border as well in the 200px height that means
height of the container + top border + bottom border=200px
so the height of .preview container should be 150px - top border(i.e 4px)=146px and for .inner container it will be 50-4 =46px;
This will work for you.
.captioned {
width: 300px;
height: 200px;
display: flex;
margin: 10px;
background-color: #FFFFFF;
border: solid 4px #000000;
border-radius: 0;
box-sizing: border-box;
overflow: hidden;
}
.captioned-inner {
width: 100%;
margin: 0;
}
.preview {
display: flex;
justify-content: center;
align-items: center;
height: 146px;
width: 100%;
}
.preview-image {
height: 100px;
max-width: 100%;
}
.info {
display: flex;
align-items: center;
box-sizing: border-box;
height: 46px;
}
.info-inner {
box-sizing: border-box;
}
.name {
font-family: 'Roboto', sans-serif;
font-size: 25px;
display: block;
margin-top: 0;
margin-bottom: 0;
line-height: 1;
overflow-wrap: anywhere;
}
<div class="captioned">
<div class="captioned-inner">
<div class="preview" style="background-color: #DE16C7 !important">
<img class="preview-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
<div class="info">
<div class="info-inner">
<p class="name">Google</p>
</div>
</div>
</div>
</div>
I'm aware of This Question and many others like it. I have reviewed several edge cases similar to mine, and none of the fixes I've tried have worked.
I have an image and text. I want the text centered below the image. What I'm getting is the paragraph always aligned to the left edge of the image and growing to the right, rather than being centered on the image such as the image below. The image itself has even-width transparent borders on each edge, the size of which you can determine by knowing the left edge of the paragraph is aligned with the left edge of the image (it's very small).
body {
background: gray;
}
#myLinks {
margin: 0;
display: flex;
flex-direction: row;
width: 100%;
width: 100vw;
height: 10vh;
background: black;
justify-content: space-around;
}
.menu-card {
height: 15vh;
width: 5vw;
margin: 0;
margin-left: 16%;
border-radius: 45px;
border: none;
padding: 0;
}
.menu-icon-container {
width: 100%;
vertical-align: top;
display: inline-block;
}
.menu-icon {
max-height: 10vh;
max-width: 5vw;
}
.card-text {
position: relative;
margin: 0;
margin-top: 100%;
font-weight: bold;
font-size: 1.2vw;
text-align: center;
border-radius: 45px;
color: white;
display: block;
}
<div id="myLinks">
<div class="menu-card">
<div class="menu-icon-container">
<a href="#">
<img class="menu-icon" src="http://placehold.it/100x300" id="portfolio-icon">
<p class="card-text">Portfolio</p>
</a>
</div>
</div>
</div>
You can use margin:auto to get this fixed.
Add a class .center-items to the parent a tag of the image with the following properties :
.center-items > img,p {
display : block;
margin : auto ;
}
body {
background: gray;
}
#myLinks {
margin: 0;
display: flex;
flex-direction: row;
width: 100%;
width: 100vw;
height: 10vh;
background: black;
justify-content: space-around;
}
.menu-card {
height: 15vh;
width: 50px;
margin: 0;
margin-left: 16%;
border-radius: 45px;
border: none;
padding: 0;
}
.menu-icon-container {
width: 100%;
vertical-align: top;
display: inline-block;
}
.menu-icon {
max-height: 10vh;
max-width: 5vw;
}
.card-text {
position: relative;
margin: 0;
margin-top: 100%;
font-weight: bold;
font-size: 1.2vw;
text-align: center;
border-radius: 45px;
color: white;
display: block;
}
.center-items > img,p {
display : block;
margin : auto ;
}
<div id="myLinks">
<div class="menu-card">
<div class="menu-icon-container">
<a href="#" class="center-items">
<img class="menu-icon" src="http://placehold.it/100x300" id="portfolio-icon">
<p class="card-text">Portfolio</p>
</a>
</div>
</div>
</div>
it may work.. plz modify the css code..
css
*,
*:after,
*:before {
margin: 0;
padding: 0;
/* Removes padding behaviour on widths */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.menu-card {
margin: 0px;
text-align: center;
}
Thanks to #TheVigilant for putting me on the right path:
.menu-icon-container a {
width: auto;
vertical-align: top;
display: inline-flex;
justify-content : center;
}
.menu-icon-container > img, p {
margin: auto;
display: block;
}
I'm trying to make a simple game, and I've run into few problems I can't seem to solve:
I can't center vertically floated elements (.stat and .clickable).
Total height of all elements should fit exactly into screen height, however it goes beyond it.
Images differ a bit in their width depending on value I give them (at my screen they look the same at 32% or 29%, but on 30% upper one has slightly wider (and a bit blurry) right border).
Height property of img elements has no effect.
Here's my code (Images are 450px wide squares):
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
}
#score {
float: left;
margin-left: 5%;
}
#hp {
float: right;
margin-right: 5%;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
width: 32%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src='game.js'></script>
</head>
<body>
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="paper.png">
<img id="playerHand" src="scissors.png">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
</body>
</html>
I don't know what you mean with your first question. However I can help you with the second. I made some small changes to your code, but I don't have the image. Look at the code bellow. The game container now is set to max-height: 100%; and height: 100vh; that should help. (100vh means the hole page. I also made body overflow: hidden;, because I think scrolling isn't necessary. I made the buttons container to the bottom of the page.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
overflow:hidden;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
}
.buttons {
bottom: 0;
clear:both;
}
#score {
float: left;
margin-left: 5%;
}
#hp {
float: right;
margin-right: 5%;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
max-height: 100%;
height: 100vh;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
height: 50%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
For the third question, we don't have the images...
For the height property try display: block; and no width then. Check your classed normally it should work.
I hope I helped you !!!
You can take advantage of flexbox in this case (note the scroll is generated by the snippet's viewport height, ideally it wouldn't even overflow, but if it did, overflow: auto is set just to handle it, you can comment it though based on your benefit):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
}
.hands {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
/* comment if content will never overflow */
overflow-x: auto;
}
.buttons {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
/*text-align: center;*/
margin: auto;
background-color: #999999;
display: flex;
flex-flow: column wrap;
justify-content: center;
}
img {
width: 32%;
display: block;
margin: auto;
}
/*#score {
float: left;
margin-left: 5%;
}*/
/*#hp {
float: right;
margin-right: 5%;
}*/
/*.stats:after {
content: "";
display: block;
clear: both;
}*/
/*#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}*/
/*#playerHand {
margin-bottom: 5%;
}*/
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="paper.png">
<img id="playerHand" src="scissors.png">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
Please check this code. I solve your question 1 and 2. I don't understand about your image issue.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
display: table;
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
width: 100%;
}
#score,
#hp{
display: table-cell;
vertical-align: middle;
padding: 10px;
}
#score {
/*float: left;
margin-left: 5%;*/
text-align: left;
}
#hp {
/*float: right;
margin-right: 5%;*/
text-align: right;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
/*float: left;*/ /*Float sould not use here */
display: table-cell;
width: 29.33%;
/*margin: 1%;
padding: 1%;*/
border: 5px solid #bfbfbf;
vertical-align: middle;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
width: 32%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src='game.js'></script>
</head>
<body>
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="http://placehold.it/450x450">
<img id="playerHand" src="http://placehold.it/450x450">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
</body>
</html>
When I view the following code I see three 25% width divs but they're all aligned left. I'm trying to center the three without setting static px sizes of the divs. The .icon-container div is rendering as width: 75% and height: 17px. Am I missing something simple?
.greybox {
width: 100%;
background-color: #a99e93;
padding: 0 5%;
margin: 0 auto 1rem auto;
}
.icon-container {
margin: 0 auto;
text-align: center;
}
.feature-icon {
width: 25%;
height: 100%;
display: inline-block;
padding-top: 2em;
padding-bottom: 2em;
}
.feature-icon img {
margin: 0 auto;
}
.feature-icon p {
font-size: 1.2rem;
color: white;
padding-top: .8em;
}
<div class="greybox">
<div class="icon-container">
<div class="feature-icon">
<img src="http://www.pickeringusa.com/wp-content/uploads/2015/01/commercial.png" style="height:128px;width:128px">
<p>Commercial</p>
</div>
<div class="feature-icon">
<img src="http://www.pickeringusa.com/wp-content/uploads/2015/01/industrial.png" style="height:128px;width:128px">
<p>Industrial</p>
</div>
<div class="feature-icon">
<img src="http://www.pickeringusa.com/wp-content/uploads/2015/01/information.png" style="height:128px;width:128px">
<p>More Information</p>
</div>
</div>
</div>
Try making these changes:
.icon-container {
margin: 0;
text-align: center;
width: 100%;
}
.feature-icon {
width: 25%;
height: 100%;
display: inline-block;
padding-top: 2em;
padding-bottom: 2em;
text-align: left;
}
Edit: The text-align: left is only required if you dont want the text center aligned
You can try this:
.icon-container {
display:table;
width:100%;
}
.feature-icon {
display:table-cell;
}