Maison > Article > interface Web > 如何让div中的内容在上下和左右都居中？_html/css_WEB-ITnose
如何让div中的内容在上下和左右都居中？_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:15:281361parcourir
我需要一个网页布局，即上div, 左div，右div，下div，如下面的设计。
可是我希望在右div内的内容，在整个右div内都居中，请问如何实现？多谢。
index.html
------------------------------------------------
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is the Header
This is the sidebar
2列左侧固定右侧自适应宽度+头部+尾部
This is the footer
layout.css
------------------------------------------------
body { font-family:Verdana; font-size:14px; margin:0;}
#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#mainContent { height:500px; margin-bottom:5px;}
#sidebar { float:left; width:200px; height:500px; background:#cf9;}
#content { margin-left:205px !important; margin-left:202px; height:500px; background:#ffa;}
#footer { height:60px; background:#9c6;}
回复讨论(解决方案)
设置margin-left,margin-right,margin-top,margin-buttom为auto。
http://aliceui.com/vertical-horizoncal/
楼主可以用以下的样式试试，可以自适应浏览器的大小。
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> <style> .right{ position: absolute; top: 50px; right: 0px; bottom: 50px; width: 300px; text-align: center; border: 1px solid blue; } .rightContent{ position: absolute; top: 50%; bottom: 50%; height: 20px; } </style> </head> <body> <div class="right"> <span class="rightContent">右DIV显示的内容</span> </div> </body></html> 横向的居中 text-align：center 垂直的居中 可以 人为 定义好里面内容的高度然后 margin:auto
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jquery table 分页_html/css_WEB-ITnoseArticle suivant：html中这个代表什么意思？？怎么处理？？_html/css_WEB-ITnose