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;
}
Related
I observe that text-align: center, while creating equal space around the left and right of the text from its container block element's boundaries (div in this case), also changes the alignment of the text to center. In this, it violates the Single Responsibility Principal.
With text-align: center
div {
box-sizing: border-box;
width: 600px;
height: 500px;
border: 4px solid red;
padding: 0 150px 0 150px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div>This is a long piece of text that runs into many lines of reading. Some people like to sleep, and some like to drink water. This is looking like a poem. It is even aligned like one. What a pity!</div>
A few things to note for the casual reader:
I am not asking how to vertically align text.
I know I can do what I want if I took a div within a div. I am not asking for alternate solutions to a problem I am trying to solve. I am asking if there is a way to do it without resorting to a kludge such as taking a containing div.
With a kludge: taking a div inside a div
body > div {
box-sizing: border-box;
width: 600px;
height: 500px;
border: 4px solid red;
display: table-cell;
vertical-align: middle;
padding: 0 150px 0 150px;
}
div > div {
text-align: justify;
margin: 0 auto;
}
<div>
<div>This is a long piece of text that runs into many lines of reading. Some people like to sleep, and some like to drink water. This is NOT looking like a poem. Oh, so nice! But it uses a hack, what the fack!</div>
<div>
I was wondering if there was a way to horizontally center text within a containing block such as a div while retaining the text alignment to left or justify.
No, there isn't and for a good reason. For if there were to be one such inbuilt solution within the CSS engine itself, without you setting the padding, who would decide how wide the text content must be?
Your best bet is to do what you were already doing. That is, to set the padding on the left and right sides, and to leave text-align: justify (or left as you please). That would do exactly what you wanted.
The problem with the approach that you are thinking of is that you somehow need to define how wide the centered text should be. In you're example you were setting the padding and the width and by that implicitly setting the width that was left for the text in the middle.
The only real solution to making sure that something only takes a predefined with in a container is actually creating a DOM-element for it. This means that you probably can't avoid the extra div here if you do not want to use the padding/width hack.
Basically, image is centered(I cant use absolute positioning because everyone has different screen resolutions and the image is centered) and I want my text to be 20 pixels down from top and 10 pixels right from left. How do I do it ? I have searched but got nothing. Probably due to my typing.
You have a couple of options. You're going to need to use a div the size of your image and center that. Then you can either set the image as the background of that div, or you can make the div position: relative and add an <img> tag that is positioned absolutely.
Here's an example of the first approach.
HTML:
<div id="imageContainer">
Some text that's overlaying the image.
</div>
CSS:
#imageContainer {
width: 275px;
height: 95px;
background: url('https://www.google.com/images/srpr/logo4w.png');
margin: 0 auto;
left: 0;
right: 0;
padding: 20px 0 0 10px;
}
And a JSFiddle to show it working: http://jsfiddle.net/VD34W/
Edit:
Since you want the text to be overlay you can use a hack using position: relative on the wrapping element and position: absolute on the inner ones. This allows you to position inside the wrapping element as long as the wrapping element has a width and height;
http://jsfiddle.net/FcBmd/1/
Irrelavent Text From Previous Answer: Something maybe using text-align: center
http://jsfiddle.net/FcBmd/
Take a look at this: http://css-tricks.com/float-center/.
Basicly it's only possible to align left and right but you can 'somehow' fake it.
you can try using the padding.
Try this:
HTML
<div id="theDiv">
<p>Some text here</p>
</div>
CSS
#theDiv {
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvT90hfqXnsPUsrySmYtU2Hj1ypEwCq0muzSCKdxOSmUnZqp_Z);
width: 300px;
height: 300px;
}
#theDiv p {
padding-top: 20px;
padding-left: 10px;
}
Demo
Good question.
Basically you say how far down from the top and how far left.
position:relative;
left:10px;
top:-20
Tip: put both the picture and text inside a div so that the text is relative to the div.
Also checkout: http://www.w3schools.com/css/css_positioning.asp
What is DIV style for HTML center tag?
The HTML:
<div id="something">
Content goes here.
</div>
And the CSS:
#something
{
width: 850px;
margin-left: auto;
margin-right: auto;
}
There is no direct equivalent. The <center> tag not only centers its containing text, but any block element too. You can mimic each of those separately, but not simultaneously.
For centering any inline/inline-block content (text, images, videos etc) you would use apply the following to a div or other block element:
.center {
text-align: center;
}
For centering a block element itself, use this:
.blockcenter {
width: 200px;
margin: 0 auto;
}
Obviously replace 200px with the desired width of the block, and 0 with whatever value you prefer for the top/bottom margins. Also note you should generally use class names that describe the element, not its presentation.
You just need to use margin: auto; to center a div. It doesn't technically matter whether it's internal/embedded, or external.
As the comment below points out, however, this will not work in inline elements.
As mentioned above, text-align: center; would be used to center text within an element.
margin: 0 auto; will only center something in CSS if you also add a width specifier. Without width it won't work - it will be placed on the left. But this means it is not equivalent to the <center> tag, for which you did not need to specify any widths. And IF you know the width of something, and have to bother to specify it in a CSS sheet, one line for each of your objects on the page (that have different widths), then you may as well just give the left margin. (software: HTML5, linux, Firefox 31)
CSS is hopeless in not centering. (Presentation language? Rubbish!)
To center a div tag on your page you would use this code. If you want the text centered within the content div you then add text-align:center; to the #content ID style
#wrapper{
background:#444;
}
#content{
width:960px;
margin:0 auto;
background:whitesmoke;
}
<div id="wrapper">
<div id="content">test</div>
</div>
If you have:
{
position:absolute;
}
you will need to delete it before the margin styles take effect.
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;
}
as the title suggests, I am trying to center the source of an image in it's image tag. The images kinda must have a 212px width, and the img tag has a width of 210px.
So instead of losing both 1px collumns from the right, is it possible to lose 1 from the left and 1 from the right?
Thanks in advance.
EDIT: my image gets compressed as it seems, not cropped, which is even worse :)
You could add a border via CSS:
img {
border: 1px solid white; /* or same colour as your site's background */
}
Or alternatively put a containing element around the image, e.g.
<div class="img"><img src .. /></div>
.img {
text-align: center;
width: 212px;
}
I would recommend wrapping the image tag inside a div. You would then set the div to have a width of 212px then set the image tag to have:
margin: 0 auto;
This line tells the image to have 0 margin on the top and bottom of the image and the auto parameter for the left and right margins forces the browser to center the element inside its containing element, in this case the div wrapper.
The best way to do this is to contain the image within a div:
<div id="image_container">
<img id="img" src="/whatever.jpg"/>
</div>
CSS:
#image_contrainer{
width:212px;
text-align: center;
}
#img{
width:auto;
margin:auto;
}
This may not be exact, but its the correct idea to do this sort of thing. Just play around until it works.