Alright so I'm trying to create a top bar line the one somewhat at the top of this one. I used the tag and when I try and put anything else on the line it goes to the next line. My code looks like this:
<div id="topbar">
<center>
<img src="images/hehe.png" />
</center>
ALSO ON TOP BAR!
</div>
but instead the image is on the top bar and "ALSO ON TOP BAR!" goes to the next line and is no longer in the top bar. How do I fix this?
#topbar
{
text-align: center;
}
and Html is
<div id="topbar">
<img src="images/hehe.png" />
ALSO ON TOP BAR!
</div>
Fiddle
Don't use <center> tag. mention in css stylesheets.. That is the better one..
<div class="topbar">
<div style="text-align:center;">
<img src="images/hehe.png" />
ALSO ON TOP BAR!
</div>
</div>
Using css text-align:center; to centralize.
I would refrain from using the center tag set as it is no longer used in HTML.
It's recommended to use CSS for your task.
As mentioned in another thread, text-align: center will fix your issue.
However, I would recommend the following to horizontally center non-textual elements:
img {
display: block;
margin: 0 auto;
}
This would center your image horizontally.
Demo: http://jsfiddle.net/uberrobert/GPGbn/1/
Related
I am using the bombax wordpress theme. As the description isn't showing up when I use an image for header, I decided to tweak the html/css to show the site slogan on the middle of the header.
This is the site:
http://www.noticiasnaturais.com/
This is the image I want to center (without overlapping the logo at left, the leaves with site name):
http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png
This is the original theme html:
<div id="headerwrap">
<div class="clear"></div>
<a href="http://www.noticiasnaturais.com/" title="Notícias Naturais" style="color: rgb(51, 51, 68);">
<img src="http://www.noticiasnaturais.com/wp-includes/images/logoHeader.png" alt="Notícias Naturais" title="Notícias Naturais">
</a>
</div>
I then tried to change as follows, adding adiv around the href to float it to the left, add an outer div to float to the right (filling the rightmost space), and a third div to be aligned at the middle.
<div id="headerwrap">
<div class="clear"></div>
<div style="float:left"><a href="https://www.noticiasnaturais.com/" title="Notícias Naturais" style="color: rgb(51, 51, 68);">
<img src="http://www.noticiasnaturais.com/wp-includes/images/imagefile" alt="Notícias Naturais" title="Notícias Naturais">
</a></div>
<div style="float:left;height: 100%";align=center><img src="https://i.stack.imgur.com/JzdyG.png">
</div>
</div>
Edit: Just clarifying the question, I need the image with the text to be on the right side of the logo. At this moment I have it directly on the background image, but that doesn't work for all screen resolutions. None of the suggestions (so far) could get it right.
I'm not 100% sure of what you are asking, but I think what you need to do is this:
<div style="float:left;height: 100%; margin-left:auto; margin-right:auto;">
That should center the image.
When you remove float: left from the div and add clear: both; text-align: center, it stretches over the whole width and stays below the leaves image. Then you have the centered image
<div style="clear: both; height: 100%; text-align: center">
<img src="http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png">
</div>
JSFiddle
Note, that the align attribute is deprecated.
Update:
When you want the text image stay on the same line, you must give a minimum width to the div and center as before with text-align: center
HTML
<div id="middle">
<img src="http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png">
</div>
CSS
#middle {
min-width: 800px;
text-align: center;
}
JSFiddle
I am having trouble correctly centering my website
It seems to be centered when I zoom out. but to a user that doesn't zoom out it looks out of place. any suggestions? the site was created with all AP divs it doesn't center correctly even when trying to use the following:
<div align="center">
Try margin:0 auto; for the container div it will center align your div :)
See the example
See the fullscreen view of the result
your design is not correct in my opinion. you must:
<body>
<div id="wrapper">
<div id="header">
from apdiv1 to 31
</div>
<div id="content">*/instead of blockquote*/
put content
</div>
<div id="footer">
put content</div>
</div>
</body>
with css
body{background-image:concrete bkg.jpg}
#wrapper{margin:0 auto}
more more more...
brgds
In css
add property
body
{
text-align:center;
margin:0 auto;
}
I am having trouble making the <h2 class="feature_description_content"> vertically align with the image to it's left. You can see that it's quite a bit lower than the top of the image, and I can't seem to find the css that is responsible for it.
Here's an image:
Here is the code:
<div class="feature feature-item-248">
<img class="main" src="http://www.bolistylus.com/wp-content/uploads/uclaproduct.png" alt="" /></p>
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">PERFECTLY WEIGHTED</h2>
</div>
<div class="feature_description_content">
<p>Touch screens have simplified technology, but there has yet to be a way to capture the precision of a calligrapher or the stroke of an artist. Not only should it meet your needs, but a stylus should have style.</p>
</div></div>
</p></div>
Thanks
This issues is must be due to default margin and padding of default HTML elements you must try out by setting
h2
{
margin:0px;
padding:0px;
}
and then change padding as required
Set its margin-top: 0; - simple :)
The image suppose to be floated to the left and cleared both ways, so text can be aligned properly...
img .main {
float: left;
clear: both;
}
So i have one div and inside i have img tag. SO what i would like to do is put that div background on top of img, i know i could use another div with absolute position to do that but maybe it's possible to do it with only 1 div?
This is my code:
<div id="container">
<img src="image.jpg" />
</div>
EDIT Sorry for explaining it all wrong, but i want to background over the image, and from what i can see right now it's not possible without extra div.
Simply put, you can't with that code.
The best you could do is use some positioning and z-index properties within a single div.
<div id="container">
<div id="cover"></div>
<img src="image.jpg" />
</div>
Then use CSS to move the cover div above the image.
You can use css to attach the background for div like
background: url(images/myimage.png) no-repeat center top;
I am facing problem while aligning two text, one in center and other text in right.
I used a Div to align it:
<div style="text-align:center">
<h1> Sample Heading</h1>
<div style="float:right; text-align:center">
sample link
</div>
</div>
When I used this my heading comes left, its not a centrally align properly please tell is this the correct way or is there any other way to handle this scenario.
Thanks
If you want the item to not mess with the layout, try absolute:
<div id="header" style="position:relative;text-align:center;"><!-- define relative so child absolute's are based on this elements origin -->
<div id="sampleLink" style="position:absolute; top:0px; right:0px; >Link</div>
<h1 style="text-align:center;">Heading</h1>
</div>
You do not need to use div's to do this, you can style the elements themselves. The < a > tag by default does not understand text-align, as it is an inline element, so I have placed the link in a paragraph, which accepts text-align. I have placed the two lines in a < div > tag with a small width so it is easy to see what is going on.
<div style="width:400px;">
<h1 style="text-align:center"> Sample Heading</h1>
<p style="text-align:right">sample link </p>
</div>
It works fine to me.
But if you have some issues with positioning of h1, try make it block: h1 { display: block; }.
On other hand, if you want to display h1 and a at the same line, you just have to put right-aligned a before h1.
For anyone using pug
To quickly align a link to the right, this seems to work:
html
head
style.
rite {
font-family: monospace;
font-size: 10pt;
text-align: right;
}
and then ...
rite
p
a(href='/logout' align=right) logout
Note that this won't work:
rite a(href='/logout' align=right) logout
And this won't work:
rite
a(href='/logout' align=right) logout
As #superUntitled explained. Great tip from #superUntitled.