How to horizontally center an element
You can apply this CSS to the inner <div>
:
#inner {
width: 50%;
margin: 0 auto;
}
Of course, you don't have to set the width
to 50%
. Any width less than the containing <div>
will work. The margin: 0 auto
is what does the actual centering.
If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:
#inner {
display: table;
margin: 0 auto;
}
It will make the inner element center horizontally and it works without setting a specific width
.
Working example here:
#inner {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
how can set a div center of other div with CSS?
Add the following style display: flex;
to the parent div
and
margin: 0 auto;
align-self: center;
to the child div to align it center horizontally as well as vertically.
So the styles become:
.Profile_Photo_Border {
border: 3px solid #052d31;
height: 90px;
width: 90px;
border-radius: 3px;
display: flex;
}
.Profile_Photo {
background-color:#005e67;
height: 80px;
width: 80px;
border-radius: 3px;
alignment-adjust:middle;
text-align:center;
margin: 0 auto;
align-self: center;
}
See the fiddle: "https://jsfiddle.net/ukgnnp4k/"
See the screenshot:
How can I center a div within another div?
You need to set the width
of the container (auto
won't work):
#container {
width: 640px; /* Can be in percentage also. */
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
}
The CSS reference by MDN explains it all.
Check out these links:
- auto - CSS reference | MDN
- margin - CSS reference | MDN
- What is the meaning of
auto
value in a CSS property - Stack Overflow
In action at jsFiddle.
How can I vertically center a div element for all browsers using CSS?
Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and worked for recent versions of Firefox, Opera, Chrome, and Safari.
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/* Whatever width you want */
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
Center a div in CSS
The text-align: center;
only centers the element's inline contents, not the element itself.
If it is a block element (a div
is), you need to set margin: 0 auto;
, else if it is an inline element, you need to set the text-align: center;
on its parent element instead.
The margin: 0 auto;
will set top and bottom margin to 0
and left and right margin to auto
(of the same size) so that it automagically puts itself in the center. This only works if the block element in question has a known width
(either fixed or relative), else it cannot figure where to start and end.
How can I vertically center a div on any resolution?
Your first line needs quotation marks around the div id. For example it should be:
<div id="story-container">
I would recommend making this a flex container and aligning with the following
#story-container {
display: flex;
align-items: center;
justify-content: center;
}
Please see a working example in my codepen here:
https://codepen.io/CTBroon/pen/PoYzyLb
How can i center image in any div in HTML & CSS?
Note that align-self is for elements inside a flexbox container which is not your case, you can try with text-align: center;
on img
.
Or if you wish to go full flexbox, set the img container to:
.containerClass {
display: flex;
flex-flow: column wrap;
justify-content: center;
}
With this setup align-self
on the img
is not need since justify-content
on it's container will do.
Related Topics
How to Create a Flexible Vertical Line in Between Two Divs
Change Button Border Color When the Button Is Being Clicked and After
How to Add a Scrollbar to an Html5 Table
How Are the Points in CSS Specificity Calculated
Why Aren't My Grid-Template-Areas With Ascii Art Not Working
Understanding Z-Index Stacking Order
How to Conditionally Apply a Class
Make Div Stay At Bottom of Page'S Content All the Time Even When There Are Scrollbars
Is the CSS Star Selector Considered Harmful (And Why)
Mvc4 Stylebundle Not Resolving Images
Vuejs Vue-Router Linking an External Website
Center a 'Div' Vertically in a % Height 'Div'
What Are the Differences Between Flex-Basis and Width
Stretch and Scale a CSS Image in the Background - With CSS Only