网络营销电子商务研究中心  
How to buy the best prescription safety glasses in Canada? Let's study!
Go Back   网络营销电子商务研究中心 > 网站设计 > CSS, DIV, HTML
User Name
Password
 
FAQ Members List Calendar Cheap Glasses

Reply
 
Thread Tools Display Modes
  #1   IP: 112.87.85.95
Old 2016-11-05, 11:42 PM
Union Level Union Level is offline
初级会员
 
Join Date: 2008-01-08
Posts: 1
Union Level 现在声名狼藉
Default bootstrap 如何让div内部垂直居中?

Code:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<style>
		.a {
			height: 50px;
			border: 1px solid #ccc;
			background-color: #eee;
		}
		.div {
			height: 130px;
			background-color: #eee;
			line-height: 9px;
		}
		#center{
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform:  translateY(-50%);
		-ms-transform:  translateY(-50%);
		-o-transform:  translateY(-50%);
		transform:  translateY(-50%);
		}

	</style>
</head>
<body>
	<div class="text-center div">
	<div id="center">
	    <p>ddd</p>
	    <p>ddd</p>
	</div>
</div>
 
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</body>
</html>
//这段css是让div内容垂直居中;
//注意的是,在bootstrao中垂直居中的div不要包裹在.container里;

其实垂直居中方法实现有很多,这是我目前水平认知比较好的解决方案;

-------------
如是一行, 设置行高等于div高度,height=line-height
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Prescription-glasses.com offers prescription glasses online at discount prices.
All times are GMT +8. The time now is 10:49 AM.


Powered by vBulletin Version 3.8.7
Copyright ©2000 - 2026, Jelsoft Enterprises Ltd.