범위 중간에 “x”를 세로로 정렬하려면 어떻게합니까?
.foo {
height: 50px;
border: solid black 1px;
display: inline-block;
vertical-align: middle;
}
<span class="foo">
x
</span>
답변
line-height:50px;
높이 대신 사용하십시오 . 그 트릭을해야합니다;)
답변
주의하십시오 line-height
당신이 긴 문장이있는 경우 접근 방식은 실패 할 span
충분한 공간이 아니기 때문에 라인을 중단한다. 이 경우 속성에 지정된 N 픽셀의 높이와 간격이있는 두 개의 선이 있습니다.
반응 형 웹 응용 프로그램에서 작동하는 세로 중앙에 텍스트가있는 이미지를 오른쪽에 표시하려고 할 때 문제가 발생했습니다. 기본적으로 Eric Nickus와 Felipe Tadeo가 제안한 접근 방식을 사용합니다.
달성하려는 경우 :
이:
.container {
background: url( "https://i.imgur.com/tAlPtC4.jpg" ) no-repeat;
display: inline-block;
background-size: 40px 40px; /* image's size */
height: 40px; /* image's height */
padding-left: 50px; /* image's width plus 10 px (margin between text and image) */
}
.container span {
height: 40px; /* image's height */
display: table-cell;
vertical-align: middle;
}
<span class="container">
<span>This is a centered sentence next to an image</span>
</span>
답변
여러 줄이 필요한 경우 가장 간단한 방법입니다. span
텍스트를 다른 것으로 감싸고 span
높이를 지정하십시오 line-height
. 다중 라인 트릭 내부 리셋되어 span
“들 line-height
.
<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>
.textvalignmiddle {
line-height: /*set height*/;
}
.textvalignmiddle > span {
display: inline-block;
vertical-align: middle;
line-height: 1em; /*set line height back to normal*/
}
물론 외부는 span
수 div
또는 whathaveyou을
답변
플렉스 박스 방식 :
.foo {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
}
답변
링크 에이 기능이 필요했기 때문에 범위를 a-tag와 div로 감싸고 span 태그 자체를 중앙에 배치했습니다.
HTML
<div>
<a class="tester" href="#">
<span>Home</span>
</a>
</div>
CSS
.tester{
display: inline-block;
width: 9em;
height: 3em;
text-align: center;
}
.tester>span{
position: relative;
top: 25%;
}
답변
CSS 세로 중심 이미지 및 텍스트
나는 수직 이미지 센터와 텍스트에 대한 하나의 데모를 만들었고 파이어 폭스, 크롬, 사파리, 인터넷 익스플로러 9 및 8에서도 테스트했습니다.
매우 짧고 쉬운 CSS와 HTML입니다. 아래 코드를 확인하면 screenshort에서 출력을 찾을 수 있습니다.
HTML
<div class="frame">
<img src="capabilities_icon1.png" alt="" />
</div>
CSS
.frame {
height: 160px;
width: 160px;
border: 1px solid red;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
.frame::before {
display: inline-block;
height: 100%;
vertical-align: middle;
content:"";
}
img {
background: #3A6F9A;
vertical-align: middle;
}
답변
이것은 나를 위해 작동합니다 (Keltex는 동일하다고 말했습니다)
.foo {
height: 50px;
...
}
.foo span{
vertical-align: middle;
}
<span class="foo"> <span>middle!</span></span>