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;
}
Related
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>
I have a div within a div that I am trying to vertically align center. I have tried vertical-align, position: relative; top: 50%, and margin: auto; to no avail. Here is the code:
.main {
font-family: "adobe-garamond-pro";
padding: 40px 0px;
color: rgba(26,26,26,0.7)
}
.intro-title {
width: 90%;
padding: 40px;
color: rgba(26,26,26,0.9);
}
.center {
margin: 0px auto;
}
.three-quarter-width {
width: 75%;
text-align: center;
}
.two-third-width {
width: 66%;
}
.half-width {
width: 50%;
}
.whitespace {
height: 7em;
}
.about {
overflow: hidden;
background-color: red;
}
.about-image {
height: auto;
float: left;
}
.about-text {
height: 100%;
float: right;
background-color: blue;
}
.inline {
display: inline;
}
.helvetica {
font-family: helvetica;
}
<div class="about three-quarter-width center">
<img src="rainbow.jpg" class="about-image half-width inline">
<div class="about-text half-width inline">
<p class="helvetica gray-spaced center">ABOUT</p>
<p class="image-text center three-quarter-width">Find out about our organization,
mission, our methods, and the results of our decades of advocacy.</p>
<p class="learn-more-button center">LEARN MORE</p>
</div>
</div>
I would like the div about-text to be vertically aligned within the div about but haven't been able to with the above methods. I'm using chrome so that might have something to do with it.
Just use css flexbox to vertical align elements.
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
/* Just for the demo */
background: red;
height: 100px;
}
.i-am-centered {
background: yellow;
}
<div class="vertical-align">
<div class="i-am-centered">
I am vertical aligned to th center
</div>
</div>
What am I doing wrong here? I want the stuff that's here to be on the middle of the screen, but however I'm trying, I can't get it working..
* {
box-sizing: border-box;
}
body {
max-width: 100%;
line-height: 1.5;
}
#wrapper {
max-width: 100%;
}
.bild {
padding: 2em 0 0 2em;
}
img {
max-width: 60%;
padding-top: 1em;
border-radius: 100px;
float: left;
display: block
}
h1 {
font-weight: 900;
font-size: 2em;
float: right;
margin-right: 25em;
margin-top: 2.2em;
}
.floatright {
float: left;
margin-left: 10em;
}
<body>
<div id="wrapper">
<div class="bild">
<img src="images/jag.jpg" alt="En bild på mig">
<h1>Välkommen!</h1>
<span class="floatright">Jag heter Patrik Qvarnström</span>
</div>
</div>
</body>
Remove float: left from img and add margin: auto like this:
* {
box-sizing: border-box;
}
body {
max-width: 100%;
line-height: 1.5;
}
#wrapper {
max-width: 100%;
}
.bild {
padding: 2em 0 0 2em;
}
img {
max-width: 60%;
padding-top: 1em;
border-radius: 100px;
display: block;
margin: auto;
}
h1 {
font-weight: 900;
font-size: 2em;
float: right;
margin-right: 25em;
margin-top: 2.2em;
}
.floatright {
float: left;
margin-left: 10em;
}
<body>
<div id="wrapper">
<div class="bild">
<img src="temp.PNG" alt="En bild på mig">
<h1>Välkommen!</h1>
<span class="floatright">Jag heter Patrik Qvarnström</span>
</div>
</div>
</body>
If Flexbox solution is OK for you - here it is (it's pretty cool for centering and in total):
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
line-height: 1.5;
}
#wrapper {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.bild {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
img {
max-width: 15%;
height: auto;
padding-top: 1em;
border-radius: 100px;
display: block
}
h1 {
font-weight: 900;
font-size: 2em;
margin-top: .5em;
}
<div id="wrapper">
<div class="bild">
<img src="https://www.adrln.com/wp-content/uploads/2017/05/img.png" alt="En bild på mig">
<h1>Välkommen!</h1>
<span class="floatright">Jag heter Patrik Qvarnström</span>
</div>
</div>
* {
box-sizing: border-box;
}
#wrapper{
display: table;
margin: 0 auto;
}
img {
max-width: 60%;
padding-top: 1em;
border-radius: 100px;
position: relative;
float: left;
}
.container {
position: relative;
float: left;
margin-left: 25px;
}
<body>
<div id="wrapper">
<div class="bild">
<img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" alt="En bild på mig" width="150">
<div class="container">
<h1>Välkommen!</h1>
<p class="floatright">Jag heter Patrik Qvarnström</p>
</div>
</div>
</div>
</body>
Set width on containing element: Declare a width or max-width property on the containing (parent)
element .bild, e.g: max-width: 55%; - adjust this value
accordingly to suit requirements.
Align horizontally center: Declare the shorthand margin property rule with a value of auto
on the containing (parent) element .bild, e.g: margin: auto; -
this will allow the containing element to horizontally center.
Code Snippet Demonstration:
* {
box-sizing: border-box;
}
body {
max-width: 100%;
line-height: 1.5;
}
#wrapper {
max-width: 100%;
}
.bild {
margin: auto;
max-width: 55%; /* adjust this value accordingly to suit requirements */
min-width: 425px; /* for the sake of demonstration */
overflow: auto;
border: 1px dashed; /* for the sake of demonstration */
padding: 10px;
}
img {
max-width: 60%;
padding-top: 1em;
border-radius: 100%;
float: left;
}
h1 {
font-weight: 900;
font-size: 2em;
margin-top: 2.2em;
}
.floatright {
float: right;
margin-left: 10px;
}
<body>
<div id="wrapper">
<div class="bild">
<img src="https://placehold.it/200x200" alt="En bild på mig">
<h1 class="floatright">Välkommen!</h1>
<span class="floatright">Jag heter Patrik Qvarnström</span>
</div>
</div>
</body>
In Summary:
.bild is a div element
a div element is a block-level element (occupies full horizontal
width, unlike inline elements)
to horizontally center a block-level element: 1. declare a width
property and 2. declare margin property with a value of auto
any element can be made a block-level element by declaring
display: block
Note: the aforementioned techniques will not behave as explained if any float properties have been declared, float will negate any attempt at horizontal alignment, unless the element in question has been declared as flex-box display, e.g: display: flex
Practical Demonstrations:
For block-level and inline elements
Horizontal Alignment (Arbitrary Elements) (CodePen)
Horizontal Alignment (Text Elements) (CodePen)
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>
What I'm trying to achieve:
I'm trying to position three elements alongside each other. Two content boxes with a dividing div in between. I am getting overflow problems with the right content box. It always appears below the two other divs.
It may be a problem with how the centre divider is positioned but I can't think of a better method of positioning it.
Codepen of what I currently have:
http://codepen.io/anon/pen/vNNKpB?editors=110
Here's my CSS:
.contact {
height: 300px;
}
.container {
width: 70%;
margin-left: 15%;
margin-right: 15%;
}
.centre-divider {
width: 0.1%;
margin-left: 49.95%;
margin-right: 49.95%;
height: 300px;
background-color: darkgray;
}
.left-contact {
width: 500px;
float: left;
height: 300px;
background-color: lightgray;
}
.right-contact {
float: right;
width: 500px;
height: 300px;
background-color: lightgrey;
}
If you use width in % for .container you should use width in % for the child elements. Otherwise, you always will have errors on the different screen size.
The new way of the positioning you want is to use flexbox without floats:
.container {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
/* ... another styles here */
}
Demo: http://codepen.io/anon/pen/RWWROr
But if you use flexbox don't forget about browser prefixes, you can get them here http://autoprefixer.github.io/
You can add another div inside the .centre-divider div which will be the vertical line, then just set a display: inline-block; on .centre-divider:
body {
font-family: Garamond, serif;
}
h1 {
font-family: Minion Pro, serif;
text-align: center;
font-size: 80px;
}
.contact {
height: 300px;
}
.container {
width: 70%;
margin-left: 15%;
margin-right: 15%;
}
.centre-divider {
width: 50%;
display: inline-block;
height: 300px;
}
.centre-divider > div {
width: 1px;
height: inherit;
background: gray;
margin: 0 auto;
}
.left-box {
width: 25%;
float: left;
height: 300px;
background-color: lightgray;
}
.right-box {
float: right;
width: 25%;
height: 300px;
background-color: lightgrey;
}
<body>
<header>
<h1>Heading</h1>
</header>
<div class="contact">
<div class="container">
<div class="left-box">
</div>
<div class="centre-divider">
<div></div>
</div>
<div class="right-box">
</div>
</div>
</div>
</body>
You will have to adjust the widths but you get the idea.
Just Add this CSS:
body {
font-family: Garamond, serif;
}
h1 {
font-family: Minion Pro, serif;
text-align: center;
font-size: 80px;
}
.contact {
height: 300px;
}
.container {
width: 70%;
float:left;
margin-left: 15%;
margin-right: 15%;
}
.centre-divider {
width: 0.1%;
float:left;
margin-left: 5%;
margin-right: 4%;
height: 300px;
background-color: darkgray;
}
.left-box {
width: 400px;
float: left;
height: 300px;
background-color: lightgray;
}
.right-box {
float: left;
width: 400px;
height: 300px;
background-color: lightgrey;
}
you can use display: inline-block; instead of floating the elements. when you text-align: center on the .contact div, then the .left-box, .right-box, and .centre-divider are automatically centered in spacing (so you dont have to calculate it yourself, and it still is responsive to the width of the screen.
body {
font-family: Garamond, serif;
}
h1 {
font-family: Minion Pro, serif;
text-align: center;
font-size: 80px;
}
.contact {
height: 300px;
}
.container {
text-align: center;
}
.centre-divider {
width: 2px;;
display: inline-block;
margin-left: 50px;
margin-right: 50px;
height: 300px;
background-color: darkgray;
}
.left-box {
width: 200px;
display: inline-block;
height: 300px;
background-color: lightgray;
}
.right-box {
display: inline-block;
width: 200px;
height: 300px;
background-color: lightgrey;
}
<body>
<header>
<h1>Heading</h1>
</header>
<div class="contact">
<div class="container">
<div class="left-box">
</div>
<div class="centre-divider"></div>
<div class="right-box">
</div>
</div>
</div>
</body>