Home > Article > Web Front-end > div centered_html/css_WEB-ITnose
div centered_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:06:10994browse
<html><head></head><body> <div align=center> <div style="width:1100px;height:40px;border:2px solid red;">11111111111111111111</div> <div style="float:left;width:200px;height:40px;border:2px solid red;">222</div> <div style="float:left;width:200px;height:40px;border:2px solid red;">333</div> <div style="float:left;width:700px;height:40px;border:2px solid red;">444</div> </div></body></html>
Only the first div is centered, the next three are still on the left
How to make them all centered
Reply to discussion (solution)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>.cf:after{content:'';display:block;clear:both;}.cf{zoom:1;}.f{margin:0 auto; width:1112px;}</style></head><body> <div class="box"> <div style="width:1100px;height:40px;border:2px solid red;margin:0 auto;">11111111111111111111</div> <div class="f cf"> <div style="float:left;width:200px;height:40px;border:2px solid red;">222</div> <div style="float:left;width:200px;height:40px;border:2px solid red;">333</div> <div style="float:left;width:700px;height:40px;border:2px solid red;">444</div> </div> </div></body></html> Because all three divs below you use float processing.
ecdfbed50c2e63bef2ca333974ea2318
ba7f809402f617059cdffa4e5c8b2cea11111111111111111111950c0e09a208ea6a6c67c615a801fbc6
82ec51029c2dd08fd5a55a30a4fea64c22216b28748ea4df4d9c2150843fecfba68
6cb444b65b107a98b1c9bb7b46a21e9c33316b28748ea4df4d9c2150843fecfba68
aba5c2566c5ef59a95849019cac0aa7244416b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Codeforces Round #239 (Div. 2)_Long Path_html/css_WEB-ITnoseNext article：Codeforces Round #239 (Div. 2)_Long Path_html/css_WEB-ITnose