Làm cách nào để căn giữa văn bản theo chiều dọc với một biểu tượng phông chữ lớn tuyệt vời?

Hãy nói rằng tôi có một nút bootstrap với một biểu tượng phông chữ tuyệt vời và một số văn bản:

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

Làm cách nào để làm cho văn bản xuất hiện theo chiều dọc? Văn bản được căn chỉnh với cạnh dưới cùng của biểu tượng ngay bây giờ: http://jsfiddle.net/V7DLm/1/

EDIT: Tôi có một giải pháp khả thi : http://jsfiddle.net/CLdeG/1/ nhưng cảm thấy hơi khó hiểu - giới thiệu thêm thẻ p, sử dụng pull-left và display: table. Có lẽ ai đó có thể đề xuất một cách dễ dàng hơn.

Tôi chỉ phải làm điều này một mình, bạn cần phải làm theo cách khác.

• không chơi với sự sắp xếp theo chiều dọc của văn bản của bạn
• chơi với sự sắp xếp theo chiều dọc của biểu tượng phông chữ tuyệt vời

<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

Tất nhiên, bạn không thể sử dụng các kiểu nội tuyến và nhắm mục tiêu nó với lớp css của riêng bạn. Nhưng điều này hoạt động trong một bản sao dán thời trang.

Xem ở đây: Căn chỉnh văn bản và biểu tượng trong nút

Tuy nhiên, nếu nó tùy thuộc vào tôi, tôi sẽ không sử dụng biểu tượng-2x. Và chỉ cần tự xác định kích thước phông chữ, như sau

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>

.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

để biết ví dụ hoạt động, vui lòng xem JsFiddle

Tôi sử dụng các biểu tượng bên cạnh văn bản 99% thời gian để tôi thực hiện thay đổi trên toàn cầu:

.fa-2x {
  vertical-align: middle;
}

Thêm 3x, 4x, vv vào cùng một định nghĩa nếu cần.

Sau khi xem xét tất cả các tùy chọn được đề xuất, giải pháp sạch nhất dường như là thiết lập chiều cao đường thẳng và chiều dọc mọi thứ:

Xem bản demo của Jsfiddle

CSS:

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}

nếu mọi thứ không xếp hàng, một đơn giản line-height: inherit;thông qua CSS trên các yếu tố i.fa cụ thể đang gặp sự cố căn chỉnh có thể thực hiện thủ thuật đủ đơn giản.

Bạn cũng có thể sử dụng một giải pháp toàn cầu một cách khả thi, do tính đặc hiệu CSS cao hơn một chút sẽ ghi đè lên quy tắc .fa của FontAwgie chỉ định line-height: 1mà không yêu cầu !importantthuộc tính:

i.fa {
  line-height: inherit;
}

Chỉ cần đảm bảo rằng giải pháp toàn cầu ở trên không gây ra bất kỳ vấn đề nào khác ở những nơi bạn cũng có thể sử dụng các biểu tượng FontAwgie.

một tùy chọn flexbox - phông chữ tuyệt vời 4.7 trở xuống

URL được lưu trữ FA 4.x - https://stackpath.bootstrapcdn.com/font-awclaw/4.7.0/css/font-awclaw.min.css

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  line-height: 40px; /* vertically size by height, line-height or padding */
  padding: 0px 10px; /* horizontal with padding-l/r */
  border: 1px solid #ccc;
}

/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='fa fa-2x fa-camera'></i>
    hello world
</div>

vĩ cầm

http://jsfiddle.net/Hastig/V7DLm/180/

sử dụng flex và font tuyệt vời 5

URL được lưu trữ FA 5.x - https://use.fontawgie.com/release/v5.0.8/js/all.js

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  padding: 3px 10px; /* horizontal vertical position with padding */
  border: 1px solid #ccc;
}
.svg-inline--fa { /* target all FA icons */
  padding-right: 10px;
}
.icon-camera .svg-inline--fa { /* target specific icon */
  font-size: 50px;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;}div{margin: 10px 0;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(212, 100%, 63%, 1);cursor: pointer;}

<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="icon-camera">
    <i class='fas fa-camera'></i>
    hello world
</div>
<div class="icon-clock">
    <i class='fas fa-clock'></i>
    hello world
</div>

vĩ cầm

https://jsfiddle.net/3bpjvof2/

Cách đơn giản nhất là đặt thuộc tính css dọc-canh thành giữa

i.fa {
    vertical-align: middle;
}

Điều này làm việc tốt cho tôi.

i.fa {
  line-height: 100%;
}

Hãy thử đặt biểu tượng của bạn là height: 100%

Bạn không cần phải làm bất cứ điều gì với trình bao bọc (giả sử, nút của bạn).

Điều này yêu cầu Font Awesome 5. Không chắc chắn nếu nó hoạt động cho các phiên bản FA cũ hơn.

.wrap svg {
    height: 100%;
}

Lưu ý rằng biểu tượng thực sự là một svgđồ họa.

Bản giới thiệu

Đối với những người sử dụng Bootstrap 4 rất đơn giản:

<span class="align-middle"><i class="fas fa-camera"></i></span>

Một tùy chọn khác để tinh chỉnh chiều cao của biểu tượng là sử dụng tỷ lệ phần trăm của thuộc vertical-aligntính. Thông thường, 0% là đáy và 100% ở trên cùng, nhưng người ta có thể sử dụng các giá trị âm hoặc hơn một trăm để tạo hiệu ứng thú vị.

.my-element i.fa {
    vertical-align: 100%; // top
    vertical-align: 50%; // middle
    vertical-align: 0%; // bottom
}

Tôi sẽ bọc văn bản trong một để bạn có thể nhắm mục tiêu nó một cách riêng biệt. Bây giờ nếu bạn nổi cả hai và trái, bạn có thể sử dụng chiều cao dòng để kiểm soát khoảng cách dọc của. Đặt nó ở cùng độ cao với (30px) sẽ căn giữa nó. Xem tại đây .

Đánh dấu mới:

 <div>
    <i class='icon icon-2x icon-camera'></i>
    <span id="text">hello world</span>
</div>

CSS mới:

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}

Khi sử dụng flexbox, việc căn chỉnh dọc các biểu tượng tuyệt vời bên cạnh văn bản có thể rất khó khăn. Tôi đã thử lề và đệm, nhưng điều đó đã di chuyển tất cả các mục. Tôi đã thử các cách sắp xếp flex khác nhau như trung tâm, bắt đầu, đường cơ sở, v.v., nhưng không có kết quả. Cách dễ nhất và sạch nhất để chỉ điều chỉnh biểu tượng là đặt nó chứa div thành position: relative; top: XX;Điều này đã thực hiện công việc một cách hoàn hảo.

Vâng, câu hỏi này đã được hỏi nhiều năm trước. Tôi nghĩ rằng công nghệ đã thay đổi khá nhiều và khả năng tương thích trình duyệt tốt hơn nhiều. Bạn có thể sử dụng căn chỉnh dọc nhưng tôi sẽ xem xét rằng một số thứ ít có khả năng mở rộng và ít tái sử dụng hơn. Tôi muốn giới thiệu một cách tiếp cận flexbox .

Dưới đây là ví dụ tương tự áp phích ban đầu được sử dụng nhưng với flexbox. Nó phong cách một yếu tố duy nhất. Nếu kích thước nút thay đổi vì bất kỳ lý do gì, nó sẽ tiếp tục được căn giữa theo chiều dọc và chiều ngang.

.button {
    border: 1px solid #ccc;
    height: 40px;
    margin: 60px;
    padding: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

Ví dụ: JsFiddle

Chỉ cần xác định thuộc vertical-aligntính cho thành phần biểu tượng:

div .icon {
   vertical-align: middle;
}