This question already has answers here:
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
How do I vertically center text with CSS? [duplicate]
(37 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 3 years ago.
How can I apply horizontal align to <label> element? If I do this <label><p>3</p></label> everything works fine. I don’t understand why <p> element has auto margin (centred) when <label> is not.
html
body {
background: #2b2b2b;
font-size: 36px;
font-family: Helvetica neue, roboto;
color: white;
}
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 75%;
margin: 0 auto;
background: black;
}
.common {
width: 45%
}
#div1 {
background: purple;
text-align: right;
}
#div2 {
background: orange;
}
#div3 {
background: olive;
text-align: right;
}
#div4 {
background: gray;
}
label {
}
<div class="main">
<div id="div1" class="common">1</div>
<div id="div2" class="common">2</div>
<div id="div3" class="common"><label for="name-label">3</label></div>
<div id="div4" class="common"><p>4</p></div>
</div>
By default p elements are display: block and label elements are display: inline.
margin: auto will centre a block element. It won't centre an inline element.
Use text-align: center (and not right) on the parent of an inline element (the <div> in this case) to centre the content within it.
The p element in your example, is not centred, it is left aligned. If it had margin: auto then it would be centred.
If you were talking about vertical alignment (which isn't what you said) then the p element is in the vertical centre, but that is because it has equal top and bottom margins from the user-agent stylesheet and its content height combined with the margins make it the tallest thing there. If the content in block 3 was taller, then the paragraph would be closer to the top than the bottom of its containing div.
Related
This question already has answers here:
How to vertically align an image inside a div
(37 answers)
How can I horizontally center an element?
(133 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 1 year ago.
I'm trying to center an image inside an h1 tag and I'm missing something and don't know what it is
https://jsfiddle.net/jbzt38Le/5/ you can find a demo right over here but I will explain anyways
inside my html I have a div like this
<div>
<h1>
<span>Load clients:</span> <br/>
<span><img src="https://i.ibb.co/tMb04W4/ok.png" alt="logo"></span>
<span>Step 2: Ok </span>
</h1>
</div>
and over the css i manage to arrange the image size like this
div > h1 > span > img {
max-width: 10%;
height: auto;
}
But now, the image (or text) is not centered with the other.
sadly I can't use flexbox because it's and email template and not all the providers are supporting flex at the moment :(
What am I missing?
Just add text-align:center to the h1 like that:
div > h1 > span > img {
max-width: 10%;
height: auto;
}
h1 {
text-align:center;
}
You can use the image as background image and then center it with: margin: 0 auto;
div > h1 > span > img {
max-width: 10%;
height: auto;
}
div {
text-align: center;
}
.ci {
background: url(https://i.ibb.co/tMb04W4/ok.png) no-repeat center center;
background-size:100px;
height: 100px;
width: 100px;
display:block;
margin: 0 auto;
}
<div>
<h1>
<span>Load clients:</span> <br/>
<span class="ci"></span>
<span>Step 2: Ok </span>
</h1>
</div>
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How do I vertically align text in a div?
(34 answers)
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I have a div with an anchor inside and I want this anchor to take the whole width of the div however, I would like to have the text of the anchor to be centered within the div, it's not working for me. I have tried this code:
.actions {
display: -webkit-flex;
display: flex;
}
.action {
background: #ef5b2b;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 5px;
text-align: center;
height: 100px;
position: relative;
}
.action a {
display: inline-block;
height: 100%;
width: 100%;
vertical-align: middle;
}
<div class="actions">
<div class="action-left action">
Hello 1
</div>
<div class="action-right action">
Hello 2
</div>
</div>
any help is appreciated.
Try this:
The .actions container needs to be flex so that the two actions containers will be evenly spaced, side by side.
Each .action container will hold the two anchor containers (which will be 100% height and width). Therefore, the .action containers only need to be width/height 100% themselves.
The a tags within the action containers need to be 100% height/width so that they fill the entire .action container. BUT, to center the text vertically and horizontally, you can use flex so that you can use justify-content: center and align-items:center - which makes the content within them centered both horizontally (justify-content) and vertically (align-items).
.actions {
width: 100%;
display: flex;
}
.action {
flex: 1;
position: relative;
width: 100%;
height: 100px;
margin: 5px;
background: #ef5b2b;
}
.action a{
height:100%;
width:100%;
display: flex;
justify-content: center;
align-items: center;
}
<div class="actions">
<div class="action-left action">
Hello 1
</div>
<div class="action-right action">
Hello 2
</div>
</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
I have this code:
.parent {
height: 100%;
background-color: #dbe2e8;
padding: 8px;
}
.light-olive {
background-color: #DFDFD1;
}
.relative {
position: relative;
/* top: 50px; */
}
.sibling {
display: inline-block;
background-color: #15C26B;
width: 150px;
height: 100px;
}
.child {
background-color: #ffae0c;
}
<div class="parent">
<div class="sibling bordered">Sibling</div>
<div class="sibling bordered"></div>
<div class="sibling bordered">Sibling</div>
</div>
The div elements with text in them keep going to the bottom of the parent div. What is the reason for this?
Because for inline elements the default vertical alignment is baseline. Set it to something like top or middle instead:
.parent {
height: 100%;
background-color: #dbe2e8;
padding: 8px;
}
.light-olive {
background-color: #DFDFD1;
}
.relative {
position: relative;
/* top: 50px; */
}
.sibling {
display: inline-block;
background-color: #15C26B;
width: 150px;
height: 100px;
vertical-align:top;
}
.child {
background-color: #ffae0c;
}
<div class="parent">
<div class="sibling bordered">Sibling</div>
<div class="sibling bordered"></div>
<div class="sibling bordered">Sibling</div>
</div>
While I can't fully explain why the div elements with text drop to the bottom, I found that you can solve this by adding the property:
vertical-align: top;
to the .sibling class.
In order to understand why the divs go below, let's talk about the display property you have mentioned for the sibling.
.sibling {
display: inline-block;
}
From the name, we can understand that display:inline-block declaration shows properties of both block and inline level elements. In order words its an inline element who's width and height can be set or it's a block element which doesn't start off from a new line.
In your code, you have mentioned inline-block so they don't occupy a single block rather all div's are displayed on the same line somewhat similar to what happens when you apply float. Here, the div won't occupy the whole line so when we resize the browser, it tries to fits in all the div's which could be fit into that single line.
Hope this makes sense to you.
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 4 years ago.
I need to align container in the centre as well as in the middle of the body.
If I add margin-top it adds a white space above the container div and shifts the background image downwards too.
I would prefer everything in percentage.
body {
margin: 0px;
height: 100%;
background-image: url("../Images/LogIn/Background.jpg");
background-size: 100% 100%;
}
html {
height: 100%;
}
.Container {
margin: auto;
width: 60%;
height: 80%;
background-color: white;
border-radius: 20px;
}
<div class="Container">
</div>
Put the following styles on the bottom to align your child div in the center:
body {
display: flex;
justify-content: center;
align-items: center;
}
.container{
margin:auto;
width: 50%
}
Any container with a width and relative position when styled with margin auto will automatically center inside a relatively positioned parent div (like body) - if it has content.
<style>
.container{
margin:auto;
width: 50%;
background-color: grey;
}
</style>
<body>
<div class="container">
<p> text </p>
</div>
</body>
Also as a sidenote, you should avoid styling the body at all.
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I horizontally center an element?
(133 answers)
Closed 2 years ago.
I am trying to vertically center two <p> elements.
I followed the tutorial at phrogz.net but still the elements get placed above the div, below the div, top-aligned within the div.
I would try something else but most of the questions here just point back to that tutorial.
This snippet is for a banner that is on the top of a web page.
.banner {
width: 980px;
height: 69px;
background-image: url(../images/nav-bg.jpg);
background-repeat: no-repeat;
/* color: #ffffff; */
}
.bannerleft {
float: left;
width: 420px;
text-align: right;
height: 652px;
line-height: 52px;
font-size: 28px;
padding-right: 5px;
}
.bannerright {
float: right;
width: 555px;
text-align: left;
position: relative;
}
.bannerrightinner {
position: absolute;
top: 50%;
height: 52px;
margin-top: -26px;
}
<div class="banner">
<div class="bannerleft">
I am vertically centered
</div>
<div class="bannerright">
<div class="bannerrightinner">
<p>I should be</p>
<p>vertically centered</p>
</div>
</div>
<div class="clear">
</div>
</div>
How to Center Elements Vertically, Horizontally or Both
Here are two ways to center divs within divs.
One way uses CSS Flexbox and the other way uses CSS table and positioning properties.
In both cases, the height of the centered divs can be variable, undefined, unknown, whatever. The height of the centered divs doesn't matter.
Here's the HTML for both:
<div id="container">
<div class="box" id="bluebox">
<p>DIV #1</p>
</div>
<div class="box" id="redbox">
<p>DIV #2</p>
</div>
</div>
CSS Flexbox Method
#container {
display: flex; /* establish flex container */
flex-direction: column; /* stack flex items vertically */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
border: 1px solid black;
}
.box {
width: 300px;
margin: 5px;
text-align: center;
}
DEMO
The two child elements (.box) are aligned vertically with flex-direction: column. For horizontal alignment, switch the flex-direction to row (or simply remove the rule as flex-direction: row is the default setting). The items will remain centered vertically and horizontally (DEMO).
CSS Table and Positioning Method
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
#container {
display: table-cell;
vertical-align: middle;
}
.box {
width: 300px;
padding: 5px;
margin: 7px auto;
text-align: center;
}
DEMO
Which method to use...
If you're not sure which method to use, I would recommend flexbox for these reasons:
minimal code; very efficient
as noted above, centering is simple and easy (see another example)
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
Browser support
Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
Add the following:
display:table; to bannerRight
display:table-cell; and
vertical-align:middle; to bannerrightinner
I have not tried this, please give me feedback if it does not work. ;)
EDIT: forgot to mention: take 'float' and 'position' properties off