스판 태그 내부에 수직으로 정렬하려면 어떻게 해야 합니까?

스판 태그 내부에 수직으로 정렬하려면 어떻게 해야 합니까?

"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 픽셀의 높이와 간격이 있는 두 개의 선이 있습니다.

저는 반응하는 웹 애플리케이션에서 작동하는 오른쪽에 수직으로 중심을 맞춘 텍스트가 있는 이미지를 보여주고 싶을 때 그것에 집착했습니다.저는 에릭 니커스와 펠리페 타데오가 제안한 접근법을 기반으로 사용합니다.

달성하고자 하는 경우:

그리고 이것은:

.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'd 텍스트를 다른 텍스트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아니면 당신은 무엇을 가지고 있습니까?

Flexbox 방식:

.foo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

링크를 위해 이것이 필요해서 a-tag와 div로 스판을 감싼 다음 스판 태그 자체의 중심을 잡았습니다.

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입니다. 아래 코드를 확인해 주십시오. 스크린 쇼트에서 출력을 찾을 수 있습니다.

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;
    }

산출량 여기에 이미지 설명 입력

이것은 나에게 효과가 있습니다 (켈텍스도 마찬가지라고 말했습니다)

.foo {
height: 50px;
...
}
.foo span{
vertical-align: middle; 
}

<span class="foo"> <span>middle!</span></span>

요소를 유연한 용기에 캡슐화하는 경우(예: 디스플레이: 플렉스) 대안을 제시합니다.

align-self: center;

추가 정보

수직 정렬 CSS 속성은 유감스럽게도 당신이 기대하는 것을 하지 않습니다.이 기사는 CSS를 사용하여 요소를 수직으로 정렬하는 2가지 방법을 설명합니다.

패딩-탑을 x를 아래로 누르는 데 적합한 값으로 설정한 다음 높이에서 패딩-탑에 대한 값을 뺍니다.

언급URL : https://stackoverflow.com/questions/732337/how-do-i-vertically-align-something-inside-a-span-tag