I wrapped an tag with a gray border, and for some reason I can't align it.
text-align:center; isn't working.
The other things work like width:155px;
So what's wrong?
There are many ways to do that.
The first could be make a auto-position style like this:
<h2 style="margin: 0 auto; width:50%; ">The Subtitile</h2>
This will positioning your h2 block in the middle of screen. The best should be use a CSS in a separated file.
I hope my aswer help you.
Related
I'm trying to put a logo in my forum, but neither the engine nor the template I use support this. So I decided to give it a try and put it. It seems so simple, but it's not.
I've tried at least 5 ways I found in the net (mostly from StackOverflow), but they either do not work at all (image not centered vertically) or solve the problem only partially as the image overlaps a text following it.
The only solution which worked in terms of vertical-centering is based on position: absolute and margin: auto
<img src="/EL3232.png" width="32" height="32" style="
float: left;
position: absolute;
top:0;
bottom:0;
margin:auto;
">
It has however a side effect: the image overlaps the forum title text.
The HTML is quite complex I would say and its simplification for the post is not easy (a lot of CSS for each preceding element), so I think I will just pass the link to my website, so you knew what I mean:
http://www.forumextalife.pl/
It's basically a hierarchy like this:
<div> -> <nav> -> <div> -> <div> -> <a>. I want to put an <img> containig the logo inside this <a> tag.
To be exact - the element in the website is: <a class="navbar-brand">
I hope you guys can solve it. I've never thought this is gonna be so complicated to have simply an image centered vertically and not overlapping text.
The cleanest approach is probably to set the image as a background image of .navbar-brand, with a bit of padding and/or line height so that the title aligns appropriately alongside it. Something like this...
.navbar-brand {
background:url(/EL3232.png) left center no-repeat;
display:inline-block;
padding-left:40px;
height:32px;
line-height:32px;
}
Keep responsive design in mind, though - I see your title already is limited at mobile sizes.
i can never seem to get the vertical align attribute to work. i have a simple div with a small picture inside it (40px high) and i need the text to align vertically in the middle. can somebody shed some light on what im doing wrong here? thanks
HTML:
<div id="back"><img src="../../images/back-button-1.jpg" style="padding-right:10px;" width="40" height="40" alt="back" />Back</div>
CSS:
#back{
width:auto;
height:40px;
background:#C36;
font-family:arial,verdana,helvetica,sans-serif;
font-size:15px;
color:#333333;}
Add this rule:
#back img {
vertical-align:middle;
}
jsFiddle example
Using "line-height" set to the height of the container on an inline element works well in this case as well, but only if it is one line of text.
So you see, I'm having a big problem here. I've already tried tons of solutions, but none have been useful to me. I'm making a custom tooltip, and I'm trying to get the text shown inside it gets vertically centered, but I haven't been able to.
.tooltip {
display:none;
background:transparent url(slides/tooltip_img.png);
font-family:Helvetica;
font-size:16px;
height:157px;
width:149px;
color:#eee;
text-align:center;
line-height:20px;
}
And this here is how I'm trying to make it center vertically:
<div id="tooltip" style="height:62px;margin-left:46px;margin-top:102px;vertical-align:middle">
<img src="supahsource.png" title="Tooltip info"/>
Anyway, I don't get the result I'm trying, can anybody help me out? Thanks a lot.
vertical-align only works with Table elements. Try using position: absolute and if you really want to use vertical-align, use display: table-cell; on the block you wish to vertically align.
I have put together an example bit of code as I am trying to get 2 images of different sizes to be aligned at the top such as shown below:
HTML
<div id="test">
<div class="social-media">
<img src="http://www.ok.gov/ltgovernor/images/Facebook-icon.png" width="120"/>
<img src="http://semanticweb.com/files/2012/01/twitter_logo.jpg" width="50" />
</div>
</div>
CSS
test {
width:980px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.social-media {
position:absolute;
background-color:#000;
right:0;
top:0;
vertical-align:top !important;
}
I realise now after reading a few posts online that vertical-align will not work in divs and solutions have been to use absolute positioning instead. The only issue is that I am already using absolute postioning for the images parent div.
Would it be good practice to do absolutes inside a parent div that is also an absolute.
However if i was to put an absolute positiong on the img then all img's would stack ontop of each other unless I was to specify each and every img with a class.
So my next thought was to put a float on img within the div. I just wanted to know if this is good practice or if anyone can tell me a cleaner way of doing this?
Also, if I were to want the images to be centrally aligned, how would this be done as the float method works in the sense of getting the images to align at the top but I am not sure how I could align centrally or maybe at the bottom?
Put overflow:auto on the social-media div then add float:left to your images.
Keep in mind you can also use negative integers like vertical-align: -1px; to go up -1px
For more details see CSS vertical-align Property and try it out here.
http://www.perfectclaims.com/ppiclaimsnew/
I dont understand why the first part of the title is right aligned?
any ideas?
Thanks
<div id="breadcrumb">
That div is creating space. I would guess you want to give it a width of 100% to make it fill horizontally so the title below has the full width to work with.
Incidentally, I was able to find out the information easily by using firebug, which is an extension for firefox.
Because that breadcrumb div is floating in the way of it. You can move the title paragraph down manually, or you can use the CSS property clear to avoid this.
It's because you're floating the breadcrumb trail to the left (and for no apparent reason, I might add). You can either remove the float CSS attribute from #breadcrumb or add clear: both; to .title.
add clear: left; to your paragraph <p class="title" style='clear: left;'>
Just remove the line float:left from id #breadcrumb.. Here float:left is not needed
so your code looks like below
#breadcrumb {
background-color:#FFFFFF;
color:#999999;
font-size:10px;
margin-top:5px;
padding-bottom:10px;
position:relative;
width:550px;
}
Cheers !!
If you are using google chrome, place the mouse over the element, right click and select 'inspect-element'.