วิธีจัดกึ่งกลางข้อความในแนวตั้งด้วยไอคอนขนาดใหญ่ที่น่ากลัวแบบอักษร?

ให้บอกว่าฉันมีปุ่มบูตที่มีไอคอนตัวอักษรที่ยอดเยี่ยมและข้อความบางส่วน:

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

ฉันจะทำให้ข้อความปรากฏกึ่งกลางในแนวตั้งได้อย่างไร ข้อความอยู่ในแนวเดียวกับขอบด้านล่างของไอคอนทันที: http://jsfiddle.net/V7DLm/1/

แก้ไข: ฉันมีทางออกที่เป็นไปได้: http://jsfiddle.net/CLdeG/1/แต่มันให้ความรู้สึกค่อนข้างยุ่งเหยิง - แนะนำแท็ก p เพิ่มเติมใช้การดึงซ้ายและแสดง: ตาราง บางทีใครบางคนสามารถแนะนำวิธีที่ง่ายขึ้น

ฉันแค่ต้องทำสิ่งนี้ด้วยตัวเองคุณต้องทำอย่างอื่น

• อย่าเล่นด้วยการจัดแนวข้อความของคุณ
• เล่นด้วยการจัดแนวแนวตั้งของไอคอนตัวอักษรสุดยอดเยี่ยม

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

แน่นอนคุณไม่สามารถใช้รูปแบบอินไลน์และกำหนดเป้าหมายด้วยคลาส css ของคุณเอง แต่สิ่งนี้ทำงานในรูปแบบการวางสำเนา

ดูที่นี่: การจัดตำแหน่งแนวตั้งของข้อความและไอคอนในปุ่ม

ถ้ามันขึ้นอยู่กับฉันอย่างไรก็ตามฉันจะไม่ใช้ไอคอน -x2 และเพียงระบุขนาดตัวอักษรของตัวเองดังต่อไปนี้

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

สำหรับตัวอย่างการทำงานโปรดดูJsFiddle

ฉันใช้ไอคอนถัดจากข้อความ 99% ของเวลาดังนั้นฉันจึงทำการเปลี่ยนแปลงทั่วโลก:

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

เพิ่ม 3x, 4x, etc ไปยังคำจำกัดความเดียวกับที่ต้องการ

หลังจากพิจารณาตัวเลือกที่แนะนำทั้งหมดแล้วโซลูชันที่สะอาดที่สุดดูเหมือนจะตั้งค่าความสูงของบรรทัดและทุกอย่างในแนวตั้ง:

ดูการสาธิต 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;
}

หากสิ่งต่าง ๆ ไม่เรียงกันง่าย ๆline-height: inherit;ผ่าน CSS บนองค์ประกอบเฉพาะของ i.fa ที่มีปัญหาเกี่ยวกับการจัดตำแหน่งสามารถทำเคล็ดลับได้ง่ายพอ

คุณยังสามารถใช้โซลูชันระดับโลกได้ซึ่งเนื่องจากความจำเพาะ CSS ที่สูงขึ้นเล็กน้อยจะแทนที่กฎ. fa ของ FontAwesome ซึ่งระบุline-height: 1โดยไม่ต้อง!importantใช้คุณสมบัติ:

i.fa {
  line-height: inherit;
}

ตรวจสอบให้แน่ใจว่าโซลูชันระดับโลกด้านบนไม่ได้ทำให้เกิดปัญหาอื่น ๆ ในสถานที่ซึ่งคุณอาจใช้ไอคอน FontAwesome

ตัวเลือก flexbox - แบบอักษรดีเลิศ 4.7 และต่ำกว่า

FA 4.x URL ที่โฮสต์ - https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.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>

ซอ

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

ใช้ดิ้นและตัวอักษรที่น่ากลัว 5

FA 5.x URL ที่โฮสต์ - https://use.fontawesome.com/releases/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>

ซอ

https://jsfiddle.net/3bpjvof2/

วิธีที่ง่ายที่สุดคือการตั้งค่าคุณสมบัติ css แนวตั้งเป็นกลาง

i.fa {
    vertical-align: middle;
}

นี้ทำงานได้ดีสำหรับฉัน.

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

ลองตั้งค่าไอคอนของคุณเป็น height: 100%

คุณไม่จำเป็นต้องทำอะไรกับเสื้อคลุม (พูดปุ่มของคุณ)

ต้องใช้ Font Awesome 5 ไม่แน่ใจว่าใช้งานได้กับ FA เวอร์ชันเก่าหรือไม่

.wrap svg {
    height: 100%;
}

โปรดทราบว่าไอคอนนี้เป็นsvgกราฟิกจริง

การสาธิต

สำหรับผู้ที่ใช้ Bootstrap 4 นั้นง่ายมาก:

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

ตัวเลือกอื่นในการปรับความสูงของบรรทัดของไอคอนคือการใช้เปอร์เซ็นต์ของvertical-alignคุณสมบัติ โดยปกติแล้ว 0% จะอยู่ด้านล่างและ 100% ที่ด้านบน แต่สามารถใช้ค่าลบหรือมากกว่าร้อยเพื่อสร้างเอฟเฟกต์ที่น่าสนใจ

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

ฉันจะห่อข้อความด้วยเพื่อให้คุณสามารถกำหนดเป้าหมายแยกจากกัน ตอนนี้ถ้าคุณลอยทั้งสองและซ้ายคุณสามารถใช้ความสูงบรรทัดเพื่อควบคุมระยะห่างแนวตั้งของ การตั้งค่าให้มีความสูงเท่ากับ (30px) จะจัดแนวกลาง ดูที่นี่

มาร์กอัปใหม่:

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

ใหม่ CSS:

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

เมื่อใช้ flexbox การจัดแนวแนวตั้งของไอคอนตัวอักษรที่ยอดเยี่ยมติดกับข้อความอาจเป็นเรื่องยากมาก ฉันลองมาร์จิ้นและแพ็ดดิ้ง แต่นั่นก็ย้ายรายการทั้งหมด ฉันลองจัดเรียงเฟล็กซ์ต่าง ๆ เช่นกึ่งกลางเริ่มต้นพื้นฐานและอื่น ๆ โดยไม่มีประโยชน์ วิธีที่ง่ายที่สุดและสะอาดที่สุดในการปรับเฉพาะไอคอนคือการตั้งค่าให้มี div เป็นposition: relative; top: XX;สิ่งนี้ทำงานได้อย่างสมบูรณ์แบบ

คำถามนี้ถูกถามเมื่อหลายปีก่อน ฉันคิดว่าเทคโนโลยีมีการเปลี่ยนแปลงเล็กน้อยและความเข้ากันได้ของเบราว์เซอร์ดีขึ้นมาก คุณสามารถใช้การจัดแนวตั้ง แต่ฉันจะพิจารณาว่าบางสิ่งที่ปรับขนาดได้น้อยกว่าและนำมาใช้ใหม่ได้น้อยกว่า ฉันอยากจะแนะนำวิธีการflexbox

นี่คือตัวอย่างเดียวกันกับโปสเตอร์ต้นฉบับที่ใช้ แต่มีเฟล็กบ็อกซ์ มันลักษณะองค์ประกอบเดียว หากขนาดของปุ่มเปลี่ยนไปไม่ว่าด้วยเหตุผลใดมันจะยังคงอยู่ที่กึ่งกลางในแนวตั้งและแนวนอน

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

ตัวอย่าง: JsFiddle

เพียงกำหนดvertical-alignคุณสมบัติสำหรับองค์ประกอบไอคอน:

div .icon {
   vertical-align: middle;
}