0

I have the following markup

<img  style="float: left;" src="c:\1.png"> <h1 style="float: center;">ttt</h1>

which i got this result:-

enter image description here

but i need the h1 to be at the middle of the page and also horizontally align at the middle of the picture,, can anyone advice ? Thanks

John John
  • 1
  • 72
  • 238
  • 501
  • 2
    vertical alignment in html/css is a massive pile of stinking fecal matter. your best bet is this: http://stackoverflow.com/questions/4785871/css-vertical-align followed by a late night visit to the W3C members who decided that vertical alignment wasn't wanted/needed, and leaving some of that fecal matter on their front steps in flaming paper bags – Marc B Oct 07 '14 at 16:02
  • you mean vertically align at the middle of the picture? btw, `float:center` doesn't exist – myfunkyside Oct 07 '14 at 16:02
  • but what if the image's width extends beyond the middle of the page? – myfunkyside Oct 07 '14 at 16:05

2 Answers2

0

there is no float: center; in CSS. Instead you should use text-align: center; or margin: 0px auto;. Also I recommend to you to use a CSS file or atleast seperate the code in the document, so you can tidy up your html code and make it easier to maintain. To horizontally align you can use vertical-align: middle: Link to a sample. or give it a margin-top: 50%;

0

DEMO

div {
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

img{
 width:150px;
 height:150px;
 background:red
}
<div>
    <img src="c:\1.png" /> <h1>ttt</h1>
</div>
Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78