Tôi đã cố gắng tìm cách căn giữa văn bản theo chiều dọc, nhưng tôi không thể tìm thấy câu trả lời thỏa đáng. Câu trả lời hay nhất tôi tìm thấy cho đến bây giờ là this. Điều này làm cho nó trông giống như nó cho phép tôi canh giữa văn bản theo chiều dọc, nhưng nếu tôi sử dụng nó và tôi thêm nhiều văn bản hơn, nó chỉ được mở rộng ở phía dưới và không được căn giữa, giống như những gì xảy ra theo chiều ngang.Làm cách nào để căn giữa văn bản theo chiều dọc với css
Lưu ý, tôi đang tìm giải pháp CSS duy nhất, do đó không javascript. Lưu ý, tôi muốn có thể thêm nhiều dòng văn bản.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
div#maindiv {
width: 810px;
height: 99px;
background-color: black;
margin: 0px;
padding: 0px;
color: white;
font-family: Sans-serif;
text-align: center;
display: table;
}
div#maindiv span {
font-size: 1.1em;
}
div#part1 {
width: 270px;
height: 99px;
background-color: #6DCAF2;
float: left;
vertical-align: middle;
position: relative;
}
div#horizon1 {
background-color: green;
height: 1px;
left: 0;
overflow: visible;
position: absolute;
text-align: center;
top: 50%;
visibility: visible;
width: 100%;
}
div#content1 {
background-color:green;
height:99px;
width: 270px;
position: absolute;
top: -50px;
}
</style>
<title>XHTML-Strict</title>
</head>
<div id="maindiv">
<body>
<div id="part1">
<div id="horizon1">
<div id="content1">
<div id="bodytext1">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dolor augue, faucibus quis sagittis
<span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Cuối cùng, tôi muốn có 3 khối, mỗi khối đều căn giữa văn bản ở giữa. Các văn bản này được khách hàng chỉnh sửa để họ có thể trải rộng trên nhiều dòng. Hiện tại, văn bản bắt đầu ở đầu hộp và đi xuống cuối, cuối cùng, tôi muốn văn bản bắt đầu tại một điểm để trung tâm của phần văn bản được đặt ở giữa hộp.
Giải pháp cuối cùng của tôi, Lưu ý: căn chỉnh dọc không hoạt động nếu bạn có phao: còn lại trong cùng một div.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
div#maindiv {
width: 810px;
height: 99px;
background-color: black;
margin: 0px;
padding: 0px;
color: white;
font-family: Sans-serif;
}
div#maindiv span {
font-size: 1.1em;
}
div.part {
width: 262px;
height: 99px;
padding: 0px;
margin: 0px;
padding: 4px;
border: 0px;
color: white;
text-align: center;
display: table-cell;
vertical-align: middle;
}
div.bgc1 {
background-color: #6DCAF2;
}
div.bgc2 {
background-color: #2A4B9A;
}
div.bgc3 {
background-color: #FF8A00;
}
</style>
<title>XHTML-Strict</title>
</head>
<div id="maindiv">
<body>
<div style="float: left;">
<div class="part bgc1">
<span>
Vegeta! What does the scouter say about his power level?!
</span>
</div>
</div>
<div style="float:left;">
<div class="part bgc2">
<span>
It's over NINE THOUSAAAAAAAAAND!
</span>
</div>
</div>
<div style="float:left;">
<div class="part bgc3">
<span>
What NINE THOUSAND? There is no way that can be right!
</span>
</div>
</div>
</div>
</body>
</html>
bạn có thể gửi mã hiện tại của bạn? câu hỏi đầu tiên luôn là: 'bạn muốn trung tâm văn bản ở đâu?' – ptriek
Có nhiều phương pháp có sẵn ở đây: http://www.vanseodesign.com/css/vertical-centering/ Nếu bạn có thể chia sẻ mã bạn đang sử dụng, có lẽ chúng tôi có thể trợ giúp với một giải pháp cụ thể. –
cách css khác là có văn bản trong ô bảng; nếu không bạn sẽ phải sử dụng js – mreq