I am trying to align vertical some text in a div here:
HTML:
<div class="div1">
<div class="div11">
<img src="https://pbs.twimg.com/media/BrJSq87IMAAD3Zg.png" alt="" width="40px">
</div>
<div class="div12">
yo
</br>
yo
</div>
</div>
CSS:
.div1 {
height: 40px;
}
.div1 div {
display: inline-block;
}
.div12 {
padding-top: 5px;
}
JSFiddle:
http://jsfiddle.net/4mVPG/1/
The height of my divs is fixed so all I want to do is set up a padding-top on the last div (.div12) to move the text down a bit. However when I add a padding-top all the box are brought down.
Why is this happening and how can I fix this? Thanks
When you use inline-block, each block acts as if it where text that gets alined (by default) on the baseline. If you increase the height of the second block, the baseline goes down, and the first block as well.
You can use vertical-align: top to change this.
Just replace CSS with this:
.div1 {
height: 40px;
}
.div1 > div {
float: left;
}
.div12 {
padding: 0 0 0 3px;
}
The div1 div selector also applies to all descendants so using > only applies to first one. Also if container is height fixed i think it's better to use float.
JSFidle
Hope it helps!
You can use ".div1 div {display: inline-block;vertical-align: top;}" and there is no need for .div12 { margin-top: 30px; } since you want both aligned top and no extra space on top of "Text div"
Also, just for a better practice, avoid using "<br>" tag, there are many "Block" tag like, <div>, <p> etc. and if there are list of "links" use "<ul><li>" and you can control the margins and spaces with CSS.
Here is the updated code :
HTML
<div class="div1">
<div class="div11">
<img src="https://pbs.twimg.com/media/BrJSq87IMAAD3Zg.png" alt="" width="40px"/>
</div>
<div class="div12">
<ul>
<li>yo
</li>
<li> yo
</li>
</ul>
</div>
</div>
CSS
.div1 {
height: 40px;
}
.div1 div {
display: inline-block;
vertical-align: top;
}
.div12 ul,
.div12 li{
margin:0;
padding:0;
list-style:none;
}
Working Fiddle for the same: http://jsfiddle.net/PK3UU/
Hope this is helpful!!!
Is it what you want ? http://jsfiddle.net/4mVPG/4/ i cleaned up css a little bit
div {
height: 40px;
display: inline-block;
vertical-align:middle;
}
and for html
<div class="div11">
<img src="http://placekitten.com/40/40" alt="" width="40px" />
</div>
<div class="div12">
yo
<br />
yo
</div>
Related
Why won't vertical-align: middle work? And yet, vertical-align: top does work.
span{
vertical-align: middle;
}
<div>
<img src="https://via.placeholder.com/30" alt="small img" />
<span>Doesn't work.</span>
</div>
Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
<span style="">Works.</span>
</div>
Tested in FF3.
Now you can use flexbox for this type of layout.
.box {
display: flex;
align-items:center;
}
<div class="box">
<img src="https://via.placeholder.com/60x60">
<span style="">Works.</span>
</div>
Here are some simple techniques for vertical-align:
One-line vertical-align:middle
This one is easy: set the line-height of the text element to equal that of the container
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Multiple-lines vertical-align:bottom
Absolutely position an inner div relative to its container
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>
Multiple-lines vertical-align:middle
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
If you must support ancient versions of IE <= 7
In order to get this to work correctly across the board, you'll have to hack the CSS a bit. Luckily, there is an IE bug that works in our favor. Setting top:50% on the container and top:-50% on the inner div, you can achieve the same result. We can combine the two using another feature IE doesn't support: advanced CSS selectors.
<style type="text/css">
#container {
width: 30px;
height: 60px;
position: relative;
}
#wrapper > #container {
display: table;
position: static;
}
#container div {
position: absolute;
top: 50%;
}
#container div div {
position: relative;
top: -50%;
}
#container > div {
display: table-cell;
vertical-align: middle;
position: static;
}
</style>
<div id="wrapper">
<div id="container">
<div><div><p>Works in everything!</p></div></div>
</div>
</div>
Variable container height vertical-align:middle
This solution requires a slightly more modern browser than the other solutions, as it makes use of the transform: translateY property. (http://caniuse.com/#feat=transforms2d)
Applying the following 3 lines of CSS to an element will vertically centre it within its parent regardless of the height of the parent element:
position: relative;
top: 50%;
transform: translateY(-50%);
Change your div into a flex container:
div { display: flex; }
Now there are two methods to center the alignments for all the content:
Method 1:
div { align-items: center; }
DEMO
Method 2:
div * { margin: auto 0; }
DEMO
Try different width and height values on the img and different font size values on the span and you'll see they always remain in the middle of the container.
You have to apply vertical-align: middle to both elements to have it been centered perfectly.
<div>
<img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
<span style="vertical-align:middle">Perfectly centered</span>
</div>
The accepted answer does center the icon around half of the x-height of the text next to it (as defined in the CSS specs). Which might be good enough but can look a little bit off, if the text has ascenders or descenders standing out just at top or bottom:
On the left, the text is not aligned, on the right it is as shown above. A live demo can be found in this article about vertical-align.
Has anyone talked about why vertical-align: top works in the scenario? The image in the question is probably taller than the text and thus defines the top edge of the line box. vertical-align: top on the span element then just positions it at the top of the line box.
The main difference in behavior between vertical-align: middle and top is that the first moves elements relative to the box's baseline (which is placed wherever needed to fulfill all vertical alignments and thus feels rather unpredictable) and the second relative to the outer bounds of the line box (which is more tangible).
The technique used in the accepted answer works only for single-lined text (demo), but not multi-line text (demo) - as noted there.
If anyone needs to vertically center multi-lined text to an image, here are a few ways
(Methods 1 and 2 inspired by this CSS-Tricks article)
Method #1: CSS tables (FIDDLE) (IE8+ (caniuse))
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
Method #2: Pseudo element on container (FIDDLE) (IE8+)
CSS:
div {
height: 200px; /* height of image */
}
div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
img {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;
margin-left: 200px; /* width of image */
}
Method #3: Flexbox (FIDDLE) (caniuse)
CSS (The above fiddle contains vendor prefixes):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
This code works in IE as well as FF:
<div>
<img style="width:auto; height:auto;vertical-align: middle;">
<span>It does work on all browsers</span>
</div>
Because you have to set the line-height to the height of the div for this to work
For the record, alignment "commands" shouldn't work on a SPAN, because it is an in-line tag, not a block-level tag. Things like alignment, margin, padding, etc won't work on an in-line tag because the point of inline is not to disrupt the text flow.
CSS divides HTML tags up into two groups: in-line and block-level. Search "css block vs inline" and a great article shows up...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(Understanding core CSS principles is a key to it not being quite so annoying)
Basically, you'll have to get down to CSS3.
-moz-box-align: center;
-webkit-box-align: center;
Use line-height:30px for the span so that text is align with the image:
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Another thing you can do is set the text's line-height to the size of the images within the <div>. Then set the images to vertical-align: middle;
That's seriously the easiest way.
Haven't seen a solution with margin in any of these answers yet, so here is my solution to this problem.
This solution only works if you know the width of your image.
The HTML
<div>
<img src="https://placehold.it/80x80">
<span>This is my very long text what should align. This is my very long text what should align.</span>
</div>
The CSS
div {
overflow:hidden;
}
img {
width:80px
margin-right:20px;
display:inline-block;
vertical-align:middle;
}
span {
width:100%;
margin-right:-100px;
padding-right:100px;
display:inline-block;
vertical-align:middle;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
Write these span properties
span{
display:inline-block;
vertical-align:middle;
}
Use display:inline-block; When you use vertical-align property.Those are assosiated properties
background:url(../images/red_bullet.jpg) left 3px no-repeat;
I generally use 3px in place of top. By increasing/decreasing that value, the image can be changed to the required height.
You can set image as inline element using display property
<div>
<img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
<span style="vertical-align: middle; display: inline;">Works.</span>
</div>
Using flex property in css.
To align text vertically center by using in flex using align-items:center; if you want to align text horizontally center by using in flex using justify-content:center;.
div{
display: flex;
align-items: center;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>It works.</span>
</div>
Using table-cell in css.
div{
display: table;
}
div *{
display: table-cell;
vertical-align: middle;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>It works.</span>
</div>
On a button in jQuery mobile, for instance, you can tweak it a bit by applying this style to the image:
.btn-image {
vertical-align:middle;
margin:0 0 3px 0;
}
Multiline solution:
http://jsfiddle.net/zH58L/6/
<div style="display:table;width:30px;height:160px;">
<img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
<div style="display:table-cell;height:30px;vertical-align:middle">
Multiline text centered vertically
</div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->
Works in all browers and ie9+
It can be confusing, I agree. Try utilizing table features. I use this simple CSS trick to position modals at the center of the webpage. It has large browser support:
<div class="table">
<div class="cell">
<img src="..." alt="..." />
<span>It works now</span>
</div>
</div>
and CSS part:
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }
Note that you have to style and adjust the size of image and table container to make it work as you desire. Enjoy.
Display flex with align-items: center; is the best way for vertically align the items
div {
display: flex;
align-items: center;
}
<div>
<img src="https://via.placeholder.com/30" alt="small img" />
<span>it works.</span>
</div>
div {
display: flex;
align-items: center;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>It works.</span>
</div>
Firstly inline CSS is not recommended at all, it really mess up your HTML.
For aligning image and span, you can simply do vertical-align:middle.
.align-middle {
vertical-align: middle;
}
<div>
<img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
<span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>
Not sure as to why it doesn't render it on your navigation's browser, but I normally use an snippet like this when trying to display a header with an image and a centered text, hope it helps!
https://output.jsbin.com/jeqorahupo
<hgroup style="display:block; text-align:center; vertical-align:middle; margin:inherit auto; padding:inherit auto; max-height:inherit">
<header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">
<image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
http://lipsum.org</header>
</hgroup>
In 2022 and with nearly 96% unprefixed browser support, I'm surprised no one has suggested the use of a grid layout.
In this JSFiddle, 3 lines are all that are necessary to achieve the OP's objective (but multiple alignments are presented for comparison):
div {
display: grid;
grid-template-columns: min-content max-content;
align-items: center
}
An additional UI nicety would include the optional use of the gap property, which enables modulation of the space between each grid-item within the parent grid container (div).
Advantages of grid layout
Easy vertical AND horizontal alignment of grid-items
Modulation of space between grid-items
Any size image (using min-content) and text length (one line using max-content or wrapped (not shown in fiddle) using min-content) would work - no need to hard-code the image dimensions in the CSS (both usages demonstrated in the demonstrated in JSFiddle)
Modern approach
Disadvantages of grid layout
Older browser support is more challenging
Grid layouts generally require more experienced developers to implement properly - not as simple as block/inline-block display
<!DOCTYPE html>
<html>
<head>
<style>
.block-system-branding-block {
flex: 0 1 40%;
}
#media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
justify-content: center;
align-items: center;
}
.flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
width: 300px;
margin: 10px;
text-align: left;
line-height: 20px;
font-size: 16px;
}
.flex-containercolumn > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block-
system-branding-block">
<div class="flex-containerrow">
<div>
<a href="/" rel="home" class="site-logo">
<img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
<div class="site-name ">
This is my sitename
</div>
<div class="site-slogan "><span>Department of Test | Ministry of Test |
TGoII</span></div>
</div></div>
</div>
</div>
</body>
</html>
You probably want this:
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
As others have suggested, try vertical-align on the image:
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
CSS isn't annoying. You just don't read the documentation. ;P
I have this HTML code
<div style="display:inline" >
<div>
<label>NOM:</label>
</div>
<div>
<label>Ben felten</label>
</div>
</div>
I got this result:
I need to change my code to get a result like this :
I need the two labels displayed in the same line and each div (parent to each label) having a width of 50 percent of the page's width.
How can i change my snipet to do that?
Thanks
Try something like this:
<div style="display:inline" >
<div style="float: left; width: 50%;">
<label>NOM:</label>
</div>
<div style="float: left; width: 50%;">
<label>Ben felten</label>
</div>
</div>
You need display inline for more than just the parent div.
div{
display:inline;
}
label{
display:inline;
}
http://jsfiddle.net/SVH5C/
add a class to your main div:
<div class="main">
<div >
<label>NOM:</label>
</div>
<div>
<label>Ben felten</label>
</div>
</div>
and in your css:
.main div{width: 50%; float: left;}
Or if those inside divs are realy there just for the labels there's no need for them to exist and you can style the labels directly, like:
<div class="main">
<label>NOM:</label>
<label>Ben felten</label>
</div>
CSS:
.main label{display: block; width: 50%; float: left;}
HTML:
<div>
<div class="label-container">
<label>NOM:</label>
</div>
<div class="label-container">
<label >Ben felten</label>
</div>
<div class="labels-end"/>
</div>
CSS:
div.labels-end{
clear: both;
}
div.label-container{
float: left;
width: 50%;
}
And the fiddle http://jsfiddle.net/RsK5N/3/
Div "labels-end" is not mandatory if labels spread over the entire width like in this case.
Without extra clear: both styled div browser will try to put the latter content in the same line as your labels. So it works without this div but only because there is no more width available.
You can also use inline-blocks and table-cells as follows.
Using inline-blocks
<div class="ex1">
<label>NOM:</label><label>Ben felten</label>
</div>
div.ex1 {
border: 1px dashed gray;
width: auto; /* will take the width of parent (page) container */
}
div.ex1 label {
display: inline-block;
width: 50%;
background-color: beige;
overflow: auto;
vertical-align: top;
}
Using CSS table-cells
<div class="ex2">
<label>NOM:</label><label>Ben felten</label>
</div>
div.ex2 {
border: 1px dashed gray;
width: 100%; /* will take the width of parent (page) container */
display: table;
}
div.ex2 label {
display: table-cell;
width: 50%;
background-color: beige;
}
If you use inline blocks, you need to be careful about any white space between the two label elements since any white space will add to the width of the line and will cause the second label to wrap to a second line. Use vertical-align: top to get rid of the extra white space below the labels which arises because of the inline formatting.
The extra white space issue does not arise with table-cells. Use width: 100% on the table div to make it fill up the width of the parent container (auto gives a shrink-to-fit width).
See demo: http://jsfiddle.net/audetwebdesign/Nb24q/
Comment: You don't need to wrap the label elements in div unless you need them for some other reason.
I have tried using float left/right, which puts them next to each other but I want them to be evenly spaced from left to right. I tried using padding/margin tags, but they don't work either. Any help would be appreciated!
Code:
<div class="options">
<ul style="list-style:none;">
<li>
<img src="magger.jpg" width="180" height="180"/><br> Do Stuff To His Dog
</li>
<p>
<li>
<img src="me.jpg" width="180" height="180"> <br>Examine His Checkered Past</p>
</li>
<p>
<li>
<img src="wife.jpg" width=180 height=180><br>Sexually Harass His Wife</p>
</li>
</ul>
CSS:
.options li {
float:right;
}
You're over complicating it:
HTML:
<div class="images">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
</div>
CSS:
.images {
text-align : center;
}
.images img {
width : 75px;
height : 75x;
margin : 10px;
}
Demo: http://jsfiddle.net/6VrJR/
add this to your css-code:
ul{
width : 550px;
margin: auto;
}
here is a jsfiddle as well
Define width and auto margin for the UL. Also, give margin and text-align center for the text.
.options ul {
width:564px;
margin:auto;
padding:0;
}
.options li {
float:right;
text-align:center;
margin:0 4px;
}
Here is the jsfiddle: http://jsfiddle.net/EASFG/
Do not use floats:
Instead of using floats for your children elements, let them flow inside an anchor tag. Anchor tags have inline as default display behavior (add display: inline; if you need to use another tag instead).
The trick that centers the links is the container text-align: center; property.
This can be translated in code as follows:
Define your container class
.container {
width: 100%;
text-align: center;
display: block;
margin: auto;
}
Create your HTML structure:
<div class='container'>
<img src="http://www.bradfordcityfc.co.uk/images/common/bg_player_profile_default_big.png" alt="">
<img src="http://www.bradfordcityfc.co.uk/images/common/bg_player_profile_default_big.png" alt="">
<img src="http://www.bradfordcityfc.co.uk/images/common/bg_player_profile_default_big.png" alt="">
</div>
Demo: http://codepen.io/manuelro/pen/Abgox
Regards,
M
I'm having a problem with placing the 'navigation' div (within 5 buttons) to the right side of the page in the '#header' div. The 'navigation' div is still next to the 'logo' div.
Can someone help me to get it to the right side of the page?
CSS code:
body {
background-color: #000000;
margin:0;
padding:0;
}
#header {
width: 100%;
height: 100px;
background-color: 222423;
margin-bottom: 5px
}
#logo {
float: left;
}
#navigation {
display: inline-block;
vertical-align: middle;
}
#content {
height: auto;
}
.knop {
margin-right: 7px;
margin-left: 20px;
vertical-align: middle
}
.plaatje {
position: fixed;
width: 628px;
height: 300px;
margin: -150px auto auto -319px;
top: 50%;
left: 50%;
text-align: center;
}
.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}
HTML code:
<html>
<head>
<link typte="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="header">
<div id="logo">
<img src="images/logo.png" width="90px">
</div>
<div id="navigation">
<img class="knop" src="images/buttonhome.png">
<img class="knop" src="images/buttonoverons.png">
<img class="knop" src="images/buttonproduct.png">
<img class="knop" src="images/buttonmedia.png">
<img class="knop" src="images/buttoncontact.png">
</div>
<div class="DivHelper"></div>
</div>
<img class="plaatje" src="images/headimage.png" >
fkfddkfd
</div>
<div id="footer">
</div>
</body>
</html>
There are multiple approaches to this, and you might have to experiment what works for you.
First of all, there's the position property, if you wanted to place the navigation to the right you'd get:
#navigation
{
position: absolute; /*or fixed*/
right: 0px;
}
This approach is very situational and might break. In some cases even breaking the entire lay-out. Best practices dictate to use this one as little as possible, but sometimes there's no other choice.
The other way, which may or may not work, again, is to use the float property
#navigation
{
float: right;
}
Do like this (use float & dont forget the clear in content div) :
#navigation {
display: inline-block;
vertical-align: middle;
float: right;
}
#content {
clear:both;
height: auto;
}
#navigation {
display: inline-block;
vertical-align: middle;
float: right;
padding-right: 50px;
padding-top: 50px;
}
adjust padding right and top px if u want....
You need to use float in navigation div and some width.
#navigation {
display: inline-block;
vertical-align: middle;
float:right;
}
Update this class and check it should work
Youri,
There are a few ways to accomplish this effect, here is one.
Take a look at this:http://jsfiddle.net/legendarylion/8jKUP/1/
THE HTML
<body>
<div id="header">
<div id="logo">
<!--You may wish to eliminate the "width" property here and use the css to style the image... also, I'm assuming you're going to want to wrap this image in an anchor tag that points back to index.html (or default.html, whatever your homepage is...-->
<img class="example-logo" src="images/logo.png" width="90px">
</div>
<!--Your image code in your original source did not have anchor tags. If you want those to function as a nav, you might as well mark it up like I have it below, wrapping the image inside of a 'nav' element, ul, li, and anchor tag. Also see the CSS comments for ideas on sprite images and sticky menus-->
<nav>
<ul>
<li><!--add your image code back here-->Home
</li>
<li><!--add your image code back here-->Overons
</li>
<li><!--add your image code back here-->Product
</li>
<li><!--add your image code back here-->Media
</li>
<li><!--add your image code back here-->Contact
</li>
</ul>
</nav>
</div>
<div class="DivHelper"></div>
</div>
<div id="footer"></div>
</body>
</html>
THE CSS
/* Make the header relative so we that the 'asbolute' positioning uses it as a reference, also, let's give that header an outline so we can see what we're doing */
#header {
position:relative;
border:1px dashed green;
}
/* Make the nav position asboslute to place it to the right */
nav {
position:absolute;
top:0px;
right:0px;
border:1px dashed blue;
}
/*So what happened? The parent element "header" is referenced by "nav" and "nav" is positioned absolutely relative to that parent in the top right hand corner. Nav will stay there even if the parent container has more elements added to it.
Also, it's worth asking I think... Did you want the menu static, or fixed as the page scrolls? That might be worth looking into as well. Look to the trusty W3C to help you out there: http://www.w3.org/Style/Examples/007/menus.en.html*/
/* Style the Nav (You can add your images right back into the html if you prefer, though you may want to look up how to make a sprite image with the css background property and positioning so they load as one file call, but hey, first thing is first right? */
nav ul li {
list-style-type:none;
display:inline-block;
margin:0 10px;
}
nav ul li a {
text-decoration:none;
}
.example-logo {
height:50px;
width:50px;
background:blue;
}
What we're doing here is declaring a parent element relative, and the element you want styled in the top right corner absolute to that relation.
Also take a look in my comments in that code for some other ideas that I think might be helpful to you.
I used margin-left property like this:
#navigation {
display: inline-block;
vertical-align: middle;
margin-left: 70%;
}
The margin-left will create space out side of element. You can get the left side of element with enough space, then your element will be the right side of the page.
Reference:
https://www.w3schools.com/css/css_margin.asp
I am trying to align a small image (logo) next to a heading on my page, and I want these two items to be centered (ideally, the heading would be centered, and the image would be to next to the heading). However, no matter what I try, I can't seem to make it work. Here's a sample:
<h2>Headline</h2>
<img src="logo.jpg">
Now, I have tried a couple of things here. I have tried giving the h2 a div with an id, and the image a div with another id - then giving them set widths and floating them. This at least puts them on the same line, but not in a way I want to.
I also tried to wrap those divs inside another div, like so:
#container {
width: 800px;
margin: 0 auto;
}
#h2div {
width: 40%;
float: left;
}
#imgdiv {
width: 10%;
float: left;
}
That only seems to divide the page so that the header gets 40% starting from the left, and the image gets 10% after that. I tried experimenting with z-index: -1 on the image, and if I then use text-align: center, I can center the headling. But then I have to give the picture a position:absolute or relative, which doesn't work well if the user zooms in or out..
How do I solve this? How do I get either the headline centered, and the image to display right next to it (sort of anchored to the "end" of the headline), or have the two share the center?
how about something like this:
<div id="container">
<h2>Headline</h2>
<img src="logo.jpg">
</div>
#container {
width: 800px;
margin: 0 auto;
text-align: center;
}
#container h2, #container img {
display: inline;
}
and jsfiddle - http://jsfiddle.net/Ygz4t/
img is inline element, so you should assign text-align:center; to the parent block element. Assuming you have such markup:
<div id="imgdiv">
<img src="logo.jpg">
</div>
your CSS could be like following:
#imgdiv {
text-align: center;
}
1) Wrap the h2 and img within a div (lets call it as container) and make display: inline-block to show h2 and img in same line
2) Then using text-align: center
HTML:
<div id="container">
<h2 style="display: inline-block">Headline</h2>
<img src="logo.jpg" />
</div>
CSS:
body {
width:1000px;
height: 2000px;
background: #ccc;
}
#container {
text-align: center;
width: inherit;
}
h2, img {
display: inline-block;
}
JSFiddle
HTML:
<div>
<h2>Headline</h2>
<img src="http://farm4.staticflickr.com/3694/10183642403_0c26d59769_s.jpg" />
</div>
CSS:
h2, img {
display:inline;
}
h2 {
margin: 0;
line-height: 100%;
}
img {
vertical-align: middle;
}
DEMO
I think you are trying this,
HTML
<div class="out">
<div class="inline">
<h2>TEST</h2>
</div>
<div class="inline">
<img src='http://s15.postimg.org/p4qxel6hz/agent_Photo.jpg' alt="testImage"/>
</div>
</div>
CSS
.out {
width: 800px;
margin: 0 auto;
}
.inline {
display:inline-block;
}
Updated JSFIDDLE
try this
<div id="center">
<h2>Headline</h2>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSR613FD45Dsf0nk_cJwlvpAUKsBM6JeOmNjAatjKKBHz_GFXt7rrvslw" alt="not found" />
</div>
Demo Fidle