DIV "central"居中,ok!,好!但是:为什么内容不?请帮忙。
谢谢
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"><head><title>Center Content</title><link rel="icon" href="http://127.0.0.1/favicon.ico" type="image/x-icon" /><link rel="shortcut icon" href="http://127.0.0.1/favicon.ico" type="image/x-icon" /><meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css">
html,body{background:#aa0000;color:#fae803;}
#todo{
text-align:center;
}
.central{
text-align:center;
background:#4d9999;
border:1px solid #000;
width:90%;
margin:auto;
}
.logo{
float:left;
width:400px;
color:#000;
}
</style>
</head><body><div class="logo">ABCDEFGHIJKLMNÑOPQRST</div>
<div id="todo">
<div class="central">
HERE INFO CENTERED
</div></div>
</body></html>
是的,我需要在“ float ”模式下向左放置“ Logo ”。真的,一切都很“完美”,但是“HERE INFO CENTERED”这个文字太疯狂了……
为什么?我如何才能将其居中?
您的文本在考虑 float 后剩余的空间中居中。参见 this enhanced demo .
.logo {
...
background: #ddd;
}
一个可能的解决方案是在与其宽度匹配的 Logo 上放置负边距,从而取消其尺寸:
.logo {
...
width:400px;
margin-right: -400px;
}
Demo
我是一名优秀的程序员,十分优秀!