I have a div with width:100%; since I want to fill out the parent container.
I also want to have the contents of the div in its center. I can not find a horizontal-align:center attribute for the divs. How can I configure the div so that its contents are in the center?
I.e if the div is this big:
------------------------------------------------------------------------------------------------------------
Enclosing tags here
in the center
------------------------------------------------------------------------------------------------------------
try this:
div {
margin:0 auto;
}
Try this for fixed width
div.class_name {
width: XXpx;
margin: 0 auto;
text-align: center;
}
Dynamic Height
<div class="container">
<div class="inside">some content</div>
</div>
.container
{
text-align: center;
}
.inside
{
display:inline-block;
}
In HTML
<div style="text-align: center;"> </div>
That all you need for the CSS.
Read about margin: auto trick:
http://bluerobot.com/web/css/center1.html
You could try setting:
margin: auto
I'm not sure if it helps in this case.
div.class {
margin:0 auto;
width: 800px /*as desired*/ ;
}
You must assign width to div that you will want locate to center then right and left margin should get 0 value
{
width: 100px;
margin : 0 auto;
}
This might be what you looking for: padding:0 20%; using a % helps auto adjust the padding depending on how wide the parent div is. You can change 20% to your preferred number.
.div {
width:100%;
padding: 0 20%;
}
You should try text-align:center; to make content of div in center.
Related
i have a problem in my css, i cant seem to center my image, unless i use padding, i tried using flexbox, wit justify-content, and align items, but it wont work, i don't know what to do, no matter what it wont center, unless i use padding. Can somebody help?
here is the code so far:
img {
padding: inherit;
margin:auto;
text-align:center;
}
here is the outcome of the webapage
Try This:
img {
padding: inherit;
margin:auto;
width: 200px;
display: block;
}
<img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
Option 1:
Setting a width so you can sets the margin to 0 auto
img { width:<image_size> margin: 0 auto }
Option 2:
Use block display and set the margin to auto
img { display: block; margin:auto; }
Use
img {
display: block;
margin:0 auto;
text-align:center;
}
Resuming all the answers:
If your image have the property display block, to center your image you will need to do the following:
img {
display:block;
width: 200px; // You need to add a fixed width
height:auto // Optional but i recommend, in case of you need a proportional redimensioning
margin:0 auto;
}
If your image "lives" free inside of your content, without display property, then you just need to center with the property text-align:center.
Example:
.center{
text-align: center;
}
<p class="center">
<img src="path/to/your/image.jpg" alt="Image Alt">
</p>
I hope it helps you.
please try to set the margin-right and marign-left to null.
img {
padding: inherit;
margin-left: 0;
margin-right: 0;
text-align: center;
}
Creating a gallery of divs with links images and text. problem is- can't get the inner wrapper to center everything. margin:0 auto; isnt working because i havent set a width for it. but i want the width to change with different browser sizes but that the inner .prjctwrap divs will be centered within it. here's my markup:
HTML :
<div id="wrapper">
<div id="innerprjctwrap">
<div class="prjctwrap">
<a href="http://www.google.com">
<div class="imageCont" style="background-image:url(image1.jpg);">
</div>
<div class="text">Text Text Text</div> </a> </div>
...this reapeats from prjctwrap with other images, text and links
</div></div>
CSS:
#wrapper {
background-color: #FFFFFF;
width:100%;
height:1000px; }
.prjctwrap {
display:inline-block;
width: 130px;
height:180px;
overflow:hidden;
margin:15px; }
.prjctwrap .imageCont{
width: 130px;
height: 100px;
background-size: cover; }
.prjctwrap .text {
text-align: center;
color: black;
text-decoration: none;
height:80px; }
.prjctwrap a {
text-decoration:none; }
#innerprjctwrap {
margin:0px auto; }
You haven't set any size on the #innerprjctwrap element, so it will have the default setting width: auto;. That means that it will use the full width available, so you can't see that it's actually centered.
Set a width on the element, and you will see that it is centered:
#innerprjctwrap {
width: 130px;
margin: 0 auto;
}
If you want to use text alignment to center the content inside the element, you shouldn't use margins to center the element, you should use text-align to center what's inside it:
#innerprjctwrap {
text-align: center;
}
Add a width for #innerprjctwrap other ways margin:0 auto; not detected
Eg:
#innerprjctwrap {
margin:0px auto;
width:200px;
}
Using JsFiddle for explaining such problems will be much clear.
Is this fiddle what you want?
If so, then you want is actually to center elements inside #innerprjctwrap like #Guffa says, simply add:
#innerprjctwrap{
text-align:center;
}
add width. if no progress, try removing 'px'. if there's still no progress, use padding in the wrapper div.
For some reason, margin:auto is not working.
HTML
<body>
<div id="background">
<div id="header">
<div id="title">Welcome</div>
</div>
</div>
</body>
CSS
#background {
min-width: 960px;
}
#title {
display: block;
margin: auto;
background-color: blue;
}
This just just draws a blue line across the top of the screen with the word 'Welcome' on the left. Why isn't my margin:auto working?
The correct syntax for horizontally centering via margin is: margin: 0px auto; as this will set the left and right margin to auto. You need to set a width on it if you use this approach, because the width is 100% by default.
Alternatively, you can also use text-align:center if you are just centering text.
Working jsFiddle using text-align:center.
Alternative jsFiddle.. I don't know what style you are trying to achieve.
The #title div will expand to fill its parent, #header, which in turn, expands to fill its own parent, #background, which has a width of at least 960px.
Therefore, #title if full width so it is centered, and by default, the text is left justified (at least in Western European languages).
If you want the #title to have a shrink-to-fit width, you can try display: inline-block.
To center #title horizontally, add text-align: center to its parent container, #header.
For example:
#background {
min-width: 960px;
}
#header {
text-align: center;
}
#title {
display: inline-block;
background-color: beige;
}
Alternatively, you can achieve the same result using display: table:
.ex2 #header {
text-align: left;
}
.ex2 #title {
display: table;
margin: 0 auto;
background-color: beige;
}
See demo at: http://jsfiddle.net/audetwebdesign/kAhnx/
I have the following Html code
<div id="team">
<h1>Team</h1>
<img src="assets/divider.png" id="divider">
<img src="assets/team.png" id="team_pic">
</div>
The following CSS
div#team {
margin: 0 auto;
margin-left:auto;
margin-right:auto;
right:auto;
left:auto;
}
However, the child elements divider and team pic are all the way to the left. I though margin:auto would center everything.
then I put the following into the child elements.
div#team img#team_pic {
width:704px;
height:462px;
margin-left:auto;
margin-left:auto;
}
Nope, nothing happen, the elements still to left and not centered.
You need to set a width to #team, for example:
div#team {
margin: 0 auto;
width: 800px;
}
... which is a shorthand version of:
div#team {
margin-top: 0;
margin-left: auto;
margin-bottom: 0;
margin-right: auto;
width: 800px;
}
Images are inline level elements by default. You need to use display:block; if you want your images and margin to work properly.
img{
display: block;
}
float will upset this too.. float:none; does the trick if you think it may be inheriting a 'float' directive from another rule somewhere.
Team needs to have a width to be able to use margin: auto.
div#team {
margin: 0 auto;
width: 400px;
}
Here is a fiddle: JS Fiddle
*Use the
display:block;
for the images classes.*
#team {
margin: auto;
width: 400px;
}
Basically margin depends on width if and only if we want to show our div in the center of the page.
If you donot want to give fixed width then we can go for width: max-content;
#team {
width: max-content;
margin: 0 auto;
}
Very simple question: What is the CORRECT way of center aligning a div that has no set width?
Doing this for a div:
.class div{
margin: 0 auto;
width: 300px;
}
will align the div horizontally center, but NOT if you remove the set width.
However, this does the trick, but is it the correct way?
.class div{
margin: 0 auto;
display: table;
}
Thank you!
Write like this:
HTML
<div class="parent">
<div class="class"></div>
</div>
CSS
.parent{
text-align:center;
}
.class{
display:inline-block;
text-align:left;
}