Thursday, 12 September 2013

I want to have a title centered on the same line as two floats one to left and one to right

I want to have a title centered on the same line as two floats one to left
and one to right

You misunderstood me in my previous message so I post a new with an
example. Assume the following that you float for example an image left and
some div to the right containing for example which browser you use and
date + time and some other things perhaps.
Now you want also to display a name for the company centered between these
two floats on the same row. The text of the company in between should
always be centered even when you make the browser width smaller.
In this example I can't make the text to be placed centered between the
two floats. It doesn't matter if I put the text in inline element or block
element. I have tried both. In this example I have a p tag.
It doesn't work to use text-align:centered when you have elements that are
floating.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<style type = "text/css">
#imageone
{
float:left;
}
p#right
{
float:right;
}
div p
{
text-align : center;
}
</style>
</head>
<body>
<div style="background:red">
<p>My company</p>
<p id="right">2013-06-12 10:00:12</p>
<img id="imageone" src="img/die1.png" alt="photo" />
</div>
</body>
</html>

No comments:

Post a Comment