Posts tagged as "line-height"

ครั้งกระนู้นเคยยกตัวอย่างการแก้ปัญหา vertical align ด้วย line-height  ซึ่งจุดประสงค์ของ line-height เองนั้นไม่ใช่การจัด vertical align แต่เรานำมามาพลิกแพลง css เองก็มีคำสั่ง vertical align ของมันเอง ก็คือ vertical-align ถ้าเปรียบเทียบกับคราวที่แล้ว ถ้าเราต้องการให้ข้อความอยู่ตรงกลางรูป เราจะกำหนด line-height ให้เท่ากับความสูงของรูปนั้นๆ ซึ่งข้อเสียของมันคือ ใช้ได้กับข้อความที่สั้น มีความยาวได้แค่บรรทัดเดียว เพราะ line-height คือ การกำหนดระยะห่างระหว่างบรรทัด แต่ถ้าใช้ vertical-align:middle ผลที่ได้จะออกมาเหมือนกันแต่อาจเขียนต่างกันเล็กน้อย ข้อดีอีกอย่าง คือ ข้อความสามารถยาวเท่าไรก็ได้ นอกจาก middle แล้วยังมี value อื่นๆ อีกเช่น baseline, top, bottom , super , sub Share