จัดแนวข้อความถัดจากภาพ?

ทำไมถึงไม่vertical-align: middleทำงาน และยังvertical-align: top ใช้งานได้

span{
  vertical-align: middle;
}

<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>

ที่จริงแล้วในกรณีนี้มันค่อนข้างง่าย: ใช้การจัดเรียงแนวตั้งกับภาพ เนื่องจากมันมีทั้งหมดในหนึ่งบรรทัดมันเป็นภาพที่คุณต้องการจัดแนวไม่ใช่ข้อความ

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

ทดสอบใน FF3

ตอนนี้คุณสามารถใช้ flexbox สำหรับเค้าโครงประเภทนี้

.box {
   display: flex;
   align-items:center;
}

<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>

นี่คือเทคนิคง่ายๆสำหรับแนวตั้ง:

จัดเรียงแนวตั้งหนึ่งบรรทัด: กลาง

อันนี้ง่าย: ตั้งค่าความสูงบรรทัดขององค์ประกอบข้อความให้เท่ากับของคอนเทนเนอร์

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

จัดเรียงแนวตั้งหลายบรรทัด: ด้านล่าง

วางตำแหน่ง div ภายในที่สัมพันธ์กับคอนเทนเนอร์

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

จัดเรียงแนวตั้งหลายบรรทัด: กลาง

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

หากคุณต้องสนับสนุน IE เวอร์ชันโบราณ <= 7

เพื่อให้สิ่งนี้ทำงานได้อย่างถูกต้องทั่วกระดานคุณจะต้องแฮ็ก CSS สักเล็กน้อย โชคดีที่มีข้อผิดพลาด IE ที่ทำงานในความโปรดปรานของเรา การตั้งค่าtop:50%บนคอนเทนเนอร์และtop:-50%บน div ภายในคุณสามารถบรรลุผลลัพธ์เดียวกัน เราสามารถรวมคุณสมบัติทั้งสองเข้าด้วยกันโดยใช้ฟีเจอร์อื่นที่ IE ไม่รองรับ: ตัวเลือก CSS ขั้นสูง

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

ความสูงภาชนะตัวแปรแนวตั้ง - แนวตั้ง: กลาง

โซลูชันนี้ต้องการเบราว์เซอร์ที่ทันสมัยกว่าโซลูชันอื่น ๆ เล็กน้อยเนื่องจากใช้ประโยชน์จากtransform: translateYคุณสมบัติ ( http://caniuse.com/#feat=transforms2d )

การใช้ CSS 3 บรรทัดต่อไปนี้กับองค์ประกอบจะจัดกึ่งกลางแนวตั้งไว้ภายในพาเรนต์โดยไม่คำนึงถึงความสูงขององค์ประกอบพาเรนต์:

position: relative;
top: 50%;
transform: translateY(-50%);

เปลี่ยนของคุณdivให้เป็นเฟล็กซ์คอนเทนเนอร์:

div { display:flex; }

ขณะนี้มีสองวิธีในการจัดแนวศูนย์สำหรับเนื้อหาทั้งหมด:

วิธีที่ 1:

div { align-items:center; }

การสาธิต

วิธีที่ 2:

div * { margin-top:auto; margin-bottom:auto; }

การสาธิต

ลองใช้ค่าความกว้างและความสูงที่imgแตกต่างกันในและขนาดตัวอักษรที่แตกต่างกันในspanและคุณจะเห็นพวกเขายังคงอยู่ในช่วงกลางของภาชนะ

คุณต้องนำไปใช้vertical-align: middleกับองค์ประกอบทั้งสองเพื่อให้มันอยู่กึ่งกลางอย่างสมบูรณ์

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

คำตอบที่ได้รับการยอมรับไม่ศูนย์ไอคอนประมาณครึ่งหนึ่งของ x ความสูงของข้อความถัดไป (ตามที่กำหนดในรายละเอียด CSS ) ซึ่งอาจจะดีพอ แต่สามารถมองออกไปเล็กน้อยถ้าข้อความมีเรียงขึ้นหรือลงมายืนอยู่ด้านบนหรือด้านล่าง:

ด้านซ้ายข้อความจะไม่จัดแนวทางด้านขวาจะแสดงตามด้านบน การสาธิตสดสามารถพบได้ในนี้บทความเกี่ยวกับแนวตั้งชิด

มีใครพูดคุยเกี่ยวกับเหตุผลที่vertical-align: topทำงานในสถานการณ์หรือไม่ รูปภาพในคำถามน่าจะสูงกว่าข้อความและกำหนดขอบด้านบนของกล่องเส้น vertical-align: topในองค์ประกอบการขยายจากนั้นเพียงแค่วางตำแหน่งไว้ที่ด้านบนของกล่องสาย

ความแตกต่างที่สำคัญในพฤติกรรมระหว่างvertical-align: middleและtopคือการเคลื่อนไหวครั้งแรกที่องค์ประกอบสัมพันธ์กับพื้นฐานของกล่อง (ซึ่งจะถูกวางไว้ที่ใดก็ได้ที่จำเป็นเพื่อตอบสนองการจัดตำแหน่งแนวตั้งทั้งหมดและทำให้รู้สึกค่อนข้างคาดเดาไม่ได้ ) และครั้งที่สอง มีตัวตนมากขึ้น)

เทคนิคที่ใช้ในคำตอบที่ยอมรับนั้นใช้ได้กับข้อความที่มีแถวเดียวเท่านั้น ( สาธิต) ) แต่ไม่ใช่ข้อความที่มีหลายบรรทัด ( สาธิต ) - ดังที่ระบุไว้ที่นั่น

หากทุกคนต้องการจัดกึ่งกลางข้อความในแนวตั้งให้ตรงกับภาพนี่คือสองสามวิธี (วิธีที่ 1 และ 2 ได้รับแรงบันดาลใจ บทความ CSS-Tricks นี้ )

วิธีที่ # 1: ตาราง CSS ( FIDDLE ) (IE8 + ( caniuse ))

CSS:

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

วิธีที่ # 2: องค์ประกอบหลอกบนคอนเทนเนอร์ ( FIDDLE ) (IE8 +)

CSS:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

วิธีที่ # 3: Flexbox ( FIDDLE ) ( caniuse )

CSS (ซอด้านบนมีคำนำหน้าผู้ขาย):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

รหัสนี้ทำงานใน IE เช่นเดียวกับ FF:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

เพราะคุณต้องตั้งค่าline-heightความสูงของ div เพื่อให้ทำงานได้

โดยทั่วไปคุณจะต้องลงไปที่ CSS3

-moz-box-align: center;
-webkit-box-align: center;

สำหรับบันทึกการจัดตำแหน่ง "คำสั่ง" ไม่ควรทำงานบน SPAN เนื่องจากเป็นแท็กในบรรทัดไม่ใช่แท็กระดับบล็อก สิ่งต่างๆเช่นการจัดตำแหน่งระยะขอบการเว้นระยะห่าง ฯลฯ จะไม่ทำงานบนแท็กในบรรทัดเนื่องจากจุดอินไลน์ไม่ได้ขัดขวางการไหลของข้อความ

CSS แบ่งแท็ก HTML ออกเป็นสองกลุ่ม: ในบรรทัดและระดับบล็อก ค้นหา "css block vs inline" และบทความที่ดีแสดงขึ้น ...

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

(การทำความเข้าใจหลักการของ CSS เป็นกุญแจสำคัญในการที่จะไม่น่ารำคาญนัก)

ใช้line-height:30pxสำหรับการขยายเพื่อให้ข้อความสอดคล้องกับภาพ:

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

สิ่งที่คุณสามารถทำได้ก็คือการตั้งค่าของข้อความกับขนาดของภาพภายในที่line-height <div>จากนั้นตั้งค่าภาพเป็นvertical-align: middle;

นั่นเป็นวิธีที่ง่ายที่สุดอย่างจริงจัง

ยังไม่เห็นวิธีแก้ไขmarginในคำตอบใด ๆ เลยดังนั้นนี่คือวิธีแก้ปัญหาของฉัน

วิธีนี้ใช้ได้เฉพาะเมื่อคุณทราบความกว้างของภาพ

HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

background:url(../images/red_bullet.jpg) left 3px no-repeat;

ฉันมักใช้ 3PX topในสถานที่ของ โดยการเพิ่ม / ลดค่านั้นภาพสามารถเปลี่ยนเป็นความสูงที่ต้องการ

เขียนคุณสมบัติการขยายเหล่านี้

span{
    display:inline-block;
    vertical-align:middle;
}

ใช้display:inline-block;เมื่อคุณใช้vertical-alignคุณสมบัติเหล่านี้คือคุณสมบัติการแยกส่วน

คุณสามารถตั้งค่าภาพinline elementโดยใช้displayคุณสมบัติ

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>

ยกตัวอย่างเช่นบนปุ่มใน jQuery mobile คุณสามารถปรับแต่งได้เล็กน้อยโดยใช้สไตล์นี้กับภาพ:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

วิธีการแก้ปัญหาหลายเส้น:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

ใช้งานได้กับทุกเบราว์เซอร์และ ie9 +

ฉันอาจเห็นว่าสับสน ลองใช้คุณสมบัติตาราง ฉันใช้เคล็ดลับ CSS ง่าย ๆ นี้เพื่อวางโมดัลไว้ที่กึ่งกลางของหน้าเว็บ มันรองรับเบราว์เซอร์ขนาดใหญ่:

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

และส่วน CSS:

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

โปรดทราบว่าคุณต้องจัดรูปแบบและปรับขนาดของรูปภาพและคอนเทนเนอร์ตารางเพื่อให้ทำงานตามที่คุณต้องการ สนุก.

CSS แบบอินไลน์แรกไม่แนะนำให้ใช้เลยทำให้ HTML ของคุณเลอะจริงๆ

vertical-align:middleสำหรับภาพที่สอดคล้องและช่วงคุณก็สามารถทำได้

.align-middle {
  vertical-align: middle;
}

<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

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

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>

คุณอาจต้องการสิ่งนี้:

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

ตามที่คนอื่นแนะนำให้ลองvertical-alignกับภาพ:

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

CSS ไม่น่ารำคาญ คุณเพียงแค่ไม่ได้อ่านเอกสาร ; P