Center a Div in Css

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:

enter image description here

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



Leave a reply



Submit