스팬 태그 안에 무언가를 세로로 정렬하려면 어떻게합니까? height: 50px;

범위 중간에 “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>