Làm thế nào để tôi sắp xếp theo chiều dọc một cái gì đó trong thẻ span?

Làm cách nào để "x" được căn chỉnh theo chiều dọc ở giữa nhịp?

.foo {
    height: 50px;
    border: solid black 1px;
    display: inline-block;
    vertical-align: middle;
}

<span class="foo">
   x
</span>

Sử dụng line-height:50px;thay vì chiều cao. Điều đó sẽ làm các trick ;)

Xin lưu ý rằng line-heightcách tiếp cận không thành công nếu bạn có một câu dài trong spanđó ngắt dòng vì không có đủ không gian. Trong trường hợp này, bạn sẽ có hai dòng có khoảng cách với chiều cao của N pixel được chỉ định trong thuộc tính.

Tôi bị mắc kẹt khi tôi muốn hiển thị một hình ảnh với văn bản được căn giữa theo chiều dọc ở bên phải của nó, hoạt động trong một ứng dụng web đáp ứng. Là một cơ sở, tôi sử dụng cách tiếp cận được đề xuất bởi Eric Nickus và Felipe Tadeo.

Nếu bạn muốn đạt được:

và điều này:

.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>

Đây là cách đơn giản nhất để làm điều đó nếu bạn cần nhiều dòng. Gói spanvăn bản của bạn trong một văn bản khác spanvà chỉ định chiều cao của nó với line-height. Bí quyết để nhiều dòng được đặt bên trong span's 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*/
}

BẢN GIỚI THIỆU

Tất nhiên bên ngoài spancó thể là một divhoặc whathaveyou

Cách flexbox:

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

Tôi cần điều này cho các liên kết, vì vậy tôi đã bọc span bằng thẻ a và div, sau đó căn giữa thẻ 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 và hình ảnh trung tâm dọc

Tôi đã tạo một bản demo cho trung tâm hình ảnh dọc và văn bản tôi cũng đã thử nghiệm trên firefox, chrome, safari, internet explorer 9 và 8.

Nó rất ngắn và dễ dàng css và html, Vui lòng kiểm tra mã bên dưới và bạn có thể tìm thấy đầu ra trên màn hình.

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

Đầu ra nhập mô tả hình ảnh ở đây

cái này hiệu quả với tôi (Keltex cũng nói như vậy)

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

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

Thuộc tính css thẳng đứng không làm những gì bạn mong đợi. Bài viết này giải thích 2 cách để sắp xếp theo chiều dọc một phần tử bằng css.

Đặt padding-top thành một giá trị phù hợp để đẩy x xuống, sau đó trừ đi giá trị bạn có cho padding-top từ chiều cao.