반응형
수직 정렬 방법
- ?
수평을 가지고 나는 있고 <ul>각각 <li>을 수직 으로 중앙에 배치해야 우리합니다 . 내 마크 업은 그렇습니다. 각 <li>항목이 있고 항목과 내용이 세로로 가운데에 있어야합니다. 도와주세요; 저는 CSS를 처음 사용합니다.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.toolbar li
{
border: solid 1px black;
display: block;
float: left;
height: 100px;
list-style-type: none;
margin: 10px;
vertical-align: middle;
}
.toolbar li.button
{
height: 50px;
}
</style>
</head>
<body>
<div class="toolbar">
<ul>
<li><a href="#">first item<br />
first item<br />
first item</a></li>
<li><a href="#">second item</a></li>
<li><a href="#">last item</a></li>
<li class="button"><a href="#">button<br />
button</a></li>
</ul>
</div>
</body>
</html>
XML 선언을 사용하고 있으므로 IE 또는 브라우저에 대해 걱정하지 않습니다.
따라서 다음 display:table-cell과 display:table-row같이 사용할 수 있습니다 .
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.toolbar ul {
display:table-row;
}
.toolbar ul li
{
display: table-cell;
height: 100px;
list-style-type: none;
margin: 10px;
vertical-align: middle;
}
.toolbar ul li a {
display:table-cell;
vertical-align: middle;
height:100px;
border: solid 1px black;
}
.toolbar ul li.button a {
height:50px;
border: solid 1px black;
}
</style>
</head>
<body>
<div class="toolbar">
<ul>
<li><a href="#">first item<br />
first item<br />
first item</a></li>
<li><a href="#">second item</a></li>
<li><a href="#">last item</a></li>
<li class="button"><a href="#">button<br />
button</a></li>
</ul>
</div>
</body>
</html>
다음은 좋은 것입니다.
line-height무엇이든 동일하게 설정하십시오 height. 매력처럼 작동합니다!
예 :
li {
height: 30px;
line-height: 30px;
}
이를 위해 flexbox를 사용할 수 있습니다.
ul {
display: flex;
align-items: center;
}
flexbox 사용 방법에 대한 자세한 설명은 여기 에서 사용할 수 있습니다 .
나는 같은 문제가 있었다. 이 시도.
<nav>
<ul>
<li><a href="#">AnaSayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
@charset "utf-8";
nav {
background-color: #9900CC;
height: 80px;
width: 400px;
}
ul {
list-style: none;
float: right;
margin: 0;
}
li {
float: left;
width: 100px;
line-height: 80px;
vertical-align: middle;
text-align: center;
margin: 0;
}
nav li a {
width: 100px;
text-decoration: none;
color: #FFFFFF;
}
참고 URL : https://stackoverflow.com/questions/3400548/how-to-vertically-align-li-elements-in-ul
반응형
'IT' 카테고리의 다른 글
| $ (달러) 기호를 허용하지 않는 PowerShell 펼쳐보기 (0) | 2020.09.03 |
|---|---|
| Apache에서 최대 동시 연결 수를 어떻게 늘리나요? (0) | 2020.09.03 |
| Spring @PostConstruct 대 init-method 속성 (0) | 2020.09.03 |
| R에서 길이가 0 인 숫자 형 벡터를 만드는 방법 (0) | 2020.09.03 |
| jQuery는 DIV를 다른 DIV로 복제합니다. (0) | 2020.09.03 |