Heim > Artikel > Web-Frontend > 如何让div中的内容在上下和左右都居中？_html/css_WEB-ITnose
如何让div中的内容在上下和左右都居中？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:15:281323Durchsuche
我需要一个网页布局，即上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
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jquery table 分页_html/css_WEB-ITnoseNächster Artikel：html中这个代表什么意思？？怎么处理？？_html/css_WEB-ITnose