I'm still new in css.
I know that
text-align:center;
and
margin:auto;
put the element in the center.
but what is the exact different between them ?
Thanks In advance.
text-align: center will center the contents of the container, while margin: auto will center the container itself.
Well
That’s depends on what every property of them work.
For the margin: it’s give the specified value for the edges of the element.
For example:
margin: 5px;
Will give the element an edge of 5px each side.
So for example when you use margin:0 auto;
It gives the element 0px edge from the top and the bottom. And give it auto equal edges from left and right. So it will move to the center.
For text-align: center;
This is most used with a text as its name. you can align the text left,right or center using it.
Related
I'm fairly new to CSS coding. I'm attempting to center an image and cannot get it to center. From what I know, the relevant code is as follows:
The CSS Code:
#header img {
align: center;
margin-top: 5px;
margin-left: 10px;
}
The code as it is on the HTML file:
<div id="header">
<a href="$settings[shopurl]">
<img src="https://capa.lunarmania.com:2083/cpsess1188922546/viewer/home%2famysp0%2fpublic_html%2fimages/AmyPromos.png" border="0" align="center" alt="" />
</a>
</div>
I feel as though I'm missing something but I cannot find it or figure it out. Any help at all is appreciated. The image sits stubbornly on the top left of the webpage instead of centering in the header like I ask it to do.
A few problems. First, it's text-align, not align.
Centering things in CSS sometimes isn't as simple as setting text-align: center. Sometimes, you'll have a block-level element which is as large as its contents; in this case, if your div is as big as the image, it won't center the image because centering it in the div won't move it. Make sure that your div is also centered, or that it's as big as the thing inside which you want to center the image.
Also, text-align: center affects contents inside an element, not the element itself. So, in this case, you want the centering CSS on #header, not just the image.
Finally, if you want to physically center an element by itself, it needs to be a block-level element (i.e. display: block, which is default for divs) and have an automatic margin on the left and right. This can be achieved by setting margin-left and margin-right to auto, or using a shorthand like margin: topbottom auto or margin: top auto bottom.
In this particular case, you probably just want to set text-align: center on the #header element, but in general, "centering an image" is sometimes more complicated than just one line.
You need to center the text inside your #header rather than center the image. Check out this fiddle: http://jsfiddle.net/10py5mu6/
#header {
width: 600px;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
border: solid 1px #000;
}
I can't seem to get these social buttons to fully right align. I've set the margins of the page to "0" and have set the alignment to right="0" - any ideas what else to do?
The url is: http://www.radiobootcamp.org/TEST.html
Thanks!
add
style="text-align:right"
to that twitter div
This will allow to align the social media buttons to the right.
The initial width of a block level element like div or p is auto. This makes it expand to occupy all available horizontal space within its containing block.
.twitter {
border: 0 none;
height: 150px;
position: fixed;
right: 5px;
top: 400px;
width: auto;
}
The thing is that they have float defined as left. I would suggest to add float:right !important; and if not working put each button in a different div with height:auto and width:auto and put float:right on that div container.
The logo image at the top of this page http://54.251.57.136/ should center with:
.logo-img {
margin: 0px auto;
display: block;
}
... but it doesn't and I can't figure out why. Any help would be great.
Take off the float: left from logo-img and add text-align: center
Your div has a class .logo-img which is set to float:left. (and it would need a fixed width for the centering to work)
You are floating the image wrapper, if you adjust your css you can center it:
ADD THIS TO YOUR .logo-img
text-align: center;
REMOVE THIS FROM YOUR .logo-img
float:left;
What do you need to know:
Floated elements get off the normal document flow, so margin:0
auto; does not apply. You need to remove it.
margin:0 auto; on the .logo-img tag is not enough, you need to add
text-align:center; to allow the image to get centered.
Your logo-img class has a float: left
You must declare width on the div if you want it to center automatically with margin: auto. In this case width: 572px
This question already has answers here:
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
Closed 8 years ago.
Is there any code or tag which can be used to centralise any HTML element? The only way I know to do this currently is to repeatedly adjust padding and margins (left) to push elements to an approximate centred position. I'm aware you can centralise text, but this doesn't appear to work for other elements such as divs, objects, etc.
To make the content center of the page try to use
body{ margin:0 auto;}
to align text center use
p{text-align:center} or div p{text-align:center;}
By using HTML tag for text
<center>your text goes here</center>
you can create a class on which you can write your css like
<div class="align-center">Your text goes here</div>
.align-center { text-align:center; } or .align-center { margin:0 auto; }
so many ways are present to make the element center, its totally depends on you what layout you are creating and what kind of element you want to make center. Generally by using css we can make our elements center or as per our requirement. If you have any peculiar situation then ask.
In CSS, the code is {text-align:center;}.
You can do this in HTML two ways, though it is not good practice. One is <div align='center'>, and the other is <center>thing to center</center>
For divs try:
body {
text-align: center;
min-width: 600px;
}
#wrapper {
margin:0 auto;
width:600px;
text-align: left;
}
Basically - setting margins to auto on your wrapper div almost always works, and text-align center for the div you'd like to be centered within it.
In html
<center> </center>
works well.
Try margin: 0 auto;
Example:
http://jsfiddle.net/4KuRW/
The best way from my experience to center an element is by setting up the CSS this way:
width: 300px; /* You actually have to set the width! */
margin: 0px auto; /* margin-top & bottom = 0, margin-left & right = auto */
To center the text you simpy use text-align: center;.
I assume you mean: you have a div with id=X, height=H, width=W that you want to center horizontally and vertically relative to a parent container C (i.e. C must have be defined with position: relative)
In your CSS file, you should define the class for X like this:
#X{
position: absolute;
top: 50%;
left: 50%;
margin-left: -(W/2)px;
margin-top: -(H/2)px;
}
I feel like I am missing something easy or stupid. This is the only element on my page that I can't seem to center. I cannot seem to centerul#footer.
http://jsfiddle.net/w67rt/
To center the footer contents horizontally, just add the following CSS:
#footer {
text-align: center;
}
Demo: http://jsfiddle.net/mathias/GZ6xh/
If you’re looking to center the entire element, just give it a width and then use margin: 0 auto:
#footer {
width: 400px;
margin: 0 auto;
}
The width of ul#footer is undefined, so it uses the default width of "100%". I tried using width:261px, and then it does center.
I find two solutions:
both here, one is commented:
http://jsfiddle.net/AzNqm/
define width of ul, and center block with margin:auto
center inner li elements
Effect will be the same.