Home > Web Front-end > HTML Tutorial > div centered_html/css_WEB-ITnose

div centered_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:06:10
Original
1027 people have browsed it

<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>
Copy after login


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>
Copy after login

Because all three divs below you use float processing.


11111111111111111111< /div>
222

333

444

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template