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)
Related
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>
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>
Why is the text in my <p> element being pushed down because of the existence of the <ins> tag? If you delete the <ins> tag from DOM via developer tools, you will see my text gets put in the position I expect.
main {
max-width: 1000px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
#portal-wrapper {
width: 100%;
padding: 40px 0;
background: #fff;
}
aside {
width: 100%;
padding: 10px 20px 20px;
box-sizing: border-box;
position: relative;
}
#media only screen and (min-width: 795px) {
main {
display: table;
}
#portal-wrapper {
display: table-cell;
min-width: 400px;
max-width: 680px;
width: auto;
}
aside {
width: 300px;
display: table-cell;
padding-right: 0;
padding-top: 41px;
}
}
<main>
<div id="portal-wrapper">
<div id="portal">
<p>
Here's my text. Why am I pushed down so far.
</p>
</div>
</div>
<aside>
<ins style="display: block; height: 600px;"> </ins>
</aside>
</main>
Fiddle here: https://jsfiddle.net/wwvq7net/1/
You could use vertical-align: top property:
main {
max-width: 1000px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
#portal-wrapper {
width: 100%;
padding: 40px 0;
background: #fff;
}
aside {
width: 100%;
padding: 10px 20px 20px;
box-sizing: border-box;
position: relative;
}
#media only screen and (min-width: 795px) {
main {
display: table;
}
#portal-wrapper {
display: table-cell;
vertical-align: top;
min-width: 400px;
max-width: 680px;
width: auto;
}
aside {
width: 300px;
display: table-cell;
vertical-align: top;
padding-right: 0;
padding-top: 41px;
}
}
<main>
<div id="portal-wrapper">
<div id="portal">
<p>
Here's my text. Why am I pushed down so far.
</p>
</div>
</div>
<aside>
<ins style="display: block; height: 600px;"> </ins>
</aside>
</main>
JSFiddle
When you set display:table-cell those elements are automatically starting with vertical-align:baseline which is why your #portal is being pushed to the bottom of #portal-wrapper.
Change to vertical-align:top or another value to fix this. Read more about vertical-align here.
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;
}