This question already has answers here:
How to align entire html body to the center?
(11 answers)
Closed 3 years ago.
Can I calculate with width of <h1> (depends on text) and center this <h1> horizontally in <body>?
Thanks for any help and hint!
Robin Zigmond is correct in their comment. You can center a block-level element by setting it's margin-left and margin-right to auto. It will appear centered if it's width is not 100% of it's parent container:
h1 {
margin-left: auto;
margin-right: auto;
}
If its width is 100% of its parent container, you could use text-align to set the text to center:
h1 {
text-align: center;
}
Related
This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 1 year ago.
I have an element that takes 100% of its container's width:
How do I make it so the width of the element is as wide as the text?
I can't find the answer online because I don't know how to formulate the question proprely.
float: left; works but it messes up the surrounding elements as some of them have this porperty as well. Is there another way?
You can set the display: inline-block OR display: inline (depends on your use case) for the element containing the text like so :
.text {
display: inline;
padding: 10px;
background: firebrick;
}
<div class="text">text</div>
<div class="text">text text text</div>
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 years ago.
I am trying to make a div appear in the middle of the browser. However, I am unable to find any form of guide working with the CSS I already have.
CSS
#register-modal {
display: inline;
position: absolute;
z-index: 1;
margin: 0 auto;
background-color: aqua;
top: 50%;
left: 50%;
text-align: center;
}
With this CSS I expected the div to appear in the middle of the browser windows, but it appears in the bottom right corner.
The HTML affected by the CSS forms a "modal" and thus I can't have the position be anything other than absolute.
You can easily achieve this by using the flex layout. And by setting the justify-content and align-items to center
justify-content: align the items on the main axis.
align-items: align the items on cross axis.
You can read about it more on the MDN doc
.container{
display:flex;
justify-content: center;
align-items: center;
width:100%;
height:100%
}
body, html {
width:100%;
height: 100%;
}
<div class="container">
<div class="sub-container">Child</div>
</div>
This question already has answers here:
Vertical-align aligns everything else except self
(2 answers)
How does the vertical-align property work?
(2 answers)
inline-box with image vertical-align:middle with parent box
(1 answer)
Closed 3 years ago.
I have an inline-block element inside a div that I need vertically aligned in the middle. However, the attribute doesn't work as expected and is always a little pushed down. This fiddle demonstrates the problem https://jsfiddle.net/e4spxubf/
I have tried setting the height and line-height of both the child parent elements to the same 14px.
<div style="
height: 14px;
line-height: 14px;
background-color: red;
"><span icon="eye-open" style="
vertical-align: middle;
background-color: aquamarine;
height: 14px;
width:14px;
display: inline-block;
"></span></div>
I expect that the blue box will be perfectly vertically centered in the parent.
The div is aligning itself with the baseline of the span. When you set vertical-align: baseline, you'll find the span now aligns itself with the baseline, too.
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Css height in percent not working [duplicate]
(8 answers)
Closed 5 years ago.
I am trying to use Flexbox to create a simple two column webpage that occupies the full width and height. The left column is a fixed width of 200px while the right column in takes up the remaining space.
So far I have:
:root {
overflow-x: hidden;
height: 100%;
}
body {
min-height: 100%
}
.flexbox {
height: 100%;
display: flex;
}
.left {
flex: 0 0 200px;
height: 100%
}
.right {
flex: 1
}
and:
<div class="flexbox">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
Width is working as expected with right occupying all the remaining space other than the 200px that left takes up. However, they are not full height?
This is not a duplicate as it uses Flexbox
Try using viewport height. This will make the divs the full height of the viewport.
.flexbox {
height: 100vh;
display: flex;
}
This question already has answers here:
How to vertically align an image inside a div
(37 answers)
Closed 8 years ago.
I am trying to put an image in a div and vertically align to the middle so it follows the previous div.
It goes like this
HTML
<div id="navigation">Navigation</div>
<div id="header"><img src="link"/></div>
<div id="content">content</div>
CSS
#header {
height: 150px;
width: 760px;
background: red;
}
What line of code would I need in order to make this happen? Whenever I put the image, it stays in the bottom of the div. I want to raise the image so it goes to the top. There is no css code for aligning to the top. Just left and right.
Can you use jQuery? if so try this:
<script>
$(document).ready(function(){
var headerHeight = $(".header").height();
var imageHeight = $(".header img").height();
$(".header img").css("margin-top",Math.floor((headerHeight - imageHeight) / 2));
});
</script>
Already answered here: How to vertically align an image inside div
use an inline-block helper with height: 100% and vertical-align:
middle on both elements.
display: inline-block;
height: 100%;
vertical-align:middle;
Example: http://jsfiddle.net/kizu/4RPFa/74/
use the CSS of:
#header {
left:0;
right:0;
margin:auto;
}