จัดกึ่งกลางภาพโดยใช้ศูนย์จัดแนวข้อความ?

คุณสมบัตินี้text-align: center;เป็นวิธีที่ดีในการจัดกึ่งกลางภาพโดยใช้ CSS หรือไม่?

img {
    text-align: center;
}

ซึ่งจะไม่ทำงานเนื่องจากtext-alignคุณสมบัตินี้ใช้กับบล็อกคอนเทนเนอร์ไม่ใช่องค์ประกอบแบบอินไลน์และimgเป็นองค์ประกอบแบบอินไลน์ ดูข้อกำหนดของ W3C

ใช้สิ่งนี้แทน:

img.center {
    display: block;
    margin: 0 auto;
}

<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

ไม่สามารถใช้งานได้เสมอ ... หากไม่ได้ลอง:

img {
    display: block;
    margin: 0 auto;
}

ฉันเจอโพสต์นี้และมันใช้ได้กับฉัน:

img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div style="border: 1px solid black; position:relative; min-height: 200px">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

(การจัดตำแหน่งแนวตั้งและแนวนอน)

อีกวิธีในการทำเช่นนั้นจะเป็นการจัดกึ่งกลางของย่อหน้าที่ล้อมรอบ:

<p style="text-align:center; border:1px solid black"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"></p>

คุณทำได้:

<center><img src="..." /></center>

ที่จริงแล้วปัญหาเดียวที่มีกับโค้ดของคุณคือแอtext-alignททริบิวต์นี้ใช้กับข้อความ (ใช่รูปภาพนับเป็นข้อความ) ภายในแท็ก คุณจะต้องการที่จะนำspanแท็กรอบภาพและการตั้งค่าของรูปแบบให้text-align: centerเป็นดังนั้น:

span.centerImage {
     text-align: center;
}

<span class="centerImage"><img src="http://placehold.it/60/60" /></span>

รูปภาพจะถูกจัดกึ่งกลาง ในการตอบคำถามของคุณมันเป็นวิธีที่ง่ายที่สุดและเข้าใจผิดได้มากที่สุดในการจัดภาพให้อยู่กึ่งกลางตราบเท่าที่คุณจำได้ว่าต้องใช้กฎกับภาพที่มีspan(หรือdiv)

มีสามวิธีในการจัดองค์ประกอบให้อยู่ตรงกลางที่ฉันสามารถแนะนำ:

1. การใช้text-alignคุณสมบัติ

       .parent {
       text-align: center;
   }

       <div class="parent">
       <img src="https://placehold.it/60/60" />
   </div>

   เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์

   ขยายตัวอย่างข้อมูล

2. การใช้marginคุณสมบัติ

   img {
       display: block;
       margin: 0 auto;
   }

   <img src="https://placehold.it/60/60" />

   เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์

   ขยายตัวอย่างข้อมูล

3. การใช้positionคุณสมบัติ

   img {
       display: block;
       position: relative;
       left: -50%;
   }
   .parent {
       position: absolute;
       left: 50%;
   }

   <div class="parent">
       <img src="https://placehold.it/60/60" />
   </div>

   เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์

   ขยายตัวอย่างข้อมูล

วิธีการแรกและครั้งที่สองจะใช้ได้ก็ต่อเมื่อผู้ปกครองมีความกว้างอย่างน้อยเท่ากับภาพ เมื่อภาพมีความกว้างมากกว่าภาพหลักภาพจะไม่อยู่ตรงกลาง !!!

แต่: วิธีที่สามเป็นวิธีที่ดีสำหรับสิ่งนั้น!

นี่คือตัวอย่าง:

img {
    display: block;
    position: relative;
    left: -50%;
}
.parent {
    position: absolute;
    left: 50%;
}

<div class="parent">
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" />
</div>

เฉพาะในกรณีที่คุณต้องการสนับสนุน Internet Explorer รุ่นโบราณ

วิธีการที่ทันสมัยคือการทำmargin: 0 autoใน CSS ของคุณ

ตัวอย่างที่นี่: http://jsfiddle.net/bKRMY/

HTML:

<p>Hello the following image is centered</p>
<p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p>
<p>Did it work?</p>

CSS:

p.pic {
    width: 48px;
    margin: 0 auto;
}

ปัญหาเดียวที่นี่เป็นที่ที่ความกว้างของวรรคจะต้องเป็นเช่นเดียวกับความกว้างของภาพ หากคุณไม่ใส่ความกว้างในย่อหน้ามันจะไม่ทำงานเพราะจะถือว่า 100% และภาพของคุณจะถูกจัดชิดซ้ายยกเว้นว่าคุณใช้text-align:centerแน่นอน

ลองเล่นซอและทดลองกับมันถ้าคุณชอบ

img{
    display: block;
    margin-right: auto;
    margin-left: auto;      
 }

หากคุณกำลังใช้คลาสที่มีรูปภาพอยู่สิ่งต่อไปนี้จะทำ

class {
    display: block;
    margin: 0 auto;
}

หากเป็นเพียงรูปภาพในคลาสเฉพาะที่คุณต้องการจัดตำแหน่งกึ่งกลางจากนั้นจะดำเนินการดังนี้:

class img {
    display: block;
    margin: 0 auto;
}

บนอิมเมจที่เก็บคอนเทนเนอร์คุณสามารถใช้ CSS 3 Flexboxเพื่อจัดกึ่งกลางของภาพภายในศูนย์ได้อย่างสมบูรณ์ทั้งในแนวตั้งและแนวนอน

สมมติว่าคุณมี <div class = "container"> ในฐานะผู้ถือรูปภาพ:

จากนั้นเป็น CSS ที่คุณต้องใช้:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

และสิ่งนี้จะทำให้เนื้อหาทั้งหมดของคุณภายใน div นี้มีศูนย์กลางที่สมบูรณ์แบบ

ทางออกที่ง่ายที่สุดที่ฉันพบคือการเพิ่มสิ่งนี้ลงในองค์ประกอบ img ของฉัน:

style="display:block;margin:auto;"

ดูเหมือนว่าฉันไม่จำเป็นต้องเพิ่ม "0" ก่อน "อัตโนมัติ" ตามที่ผู้อื่นแนะนำ อาจเป็นวิธีที่เหมาะสม แต่ก็ใช้ได้ดีพอสำหรับวัตถุประสงค์ของฉันหากไม่มี "0" เช่นกัน อย่างน้อยใน Firefox, Chrome และEdgeล่าสุด

เพียงแค่เปลี่ยนการจัดแนวผู้ปกครอง :)

ลองใช้ตัวเลือกนี้กับคุณสมบัติหลัก:

text-align:center

คุณสามารถใช้ได้ text-align: centerในการปกครองและเปลี่ยนimgไปdisplay: inline-block→จึงพฤติกรรมเช่นข้อความองค์ประกอบและจะเป็นศูนย์กลางถ้าผู้ปกครองมีความกว้าง!

img {
    display: inline-block
}

ฉันจะใช้ div เพื่อจัดกึ่งกลางภาพ ในขณะที่:

<div align="center"><img src="your_image_source"/></div>

หากคุณต้องการตั้งค่าภาพเป็นพื้นหลังฉันมีวิธีแก้ไข:

.image {
    background-image: url(yourimage.jpg);
    background-position: center;
}

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

กรณีของอินไลน์

หากคุณต้องการให้พฤติกรรมเริ่มต้นของคุณสมบัติ CSS ของรูปภาพแสดงคุณจะต้องล้อมรูปภาพของคุณไว้ในองค์ประกอบบล็อกอื่นที่คุณต้องตั้งค่า text-align: center;

กรณีของบล็อก

หากคุณต้องการพิจารณาภาพเป็นองค์ประกอบบล็อกของตัวเองแล้วtext-alignคุณสมบัติไม่ทำให้รู้สึกและคุณควรทำเช่นนี้แทน:

IMG.display {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

คำตอบสำหรับคำถามของคุณ:

การจัดตำแหน่งคุณสมบัติข้อความ: center; วิธีที่ดีในการจัดกึ่งกลางภาพโดยใช้ CSS คืออะไร?

ใช่และไม่.

• ใช่ถ้าภาพเป็นองค์ประกอบเดียวในเสื้อคลุม
• ไม่ในกรณีที่คุณมีองค์ประกอบอื่น ๆ ภายในเสื้อคลุมของภาพเพราะองค์ประกอบเด็กทั้งหมดที่เป็นพี่น้องของภาพจะได้รับมรดกtext-align: และอาจเป็นเพราะคุณไม่ชอบผลข้างเคียงนี้

อ้างอิง

1. รายการองค์ประกอบแบบอินไลน์
2. อยู่ตรงกลางสิ่งต่าง ๆ

อีกวิธีหนึ่งในการปรับขนาด - แสดง:

img {
  width: 60%; /* Or required size of image. */
  margin-left: 20% /* Or scale it to move image. */
  margin-right: 20% /* It doesn't matters much if using left and width */
}

ใช้สิ่งนี้กับimgCSS ของคุณ:

img {
  margin-right: auto;
  margin-left: auto;
}

display: blockด้วยmargin: 0ไม่ได้ผลสำหรับฉันไม่ได้ห่อด้วยtext-align: centerองค์ประกอบ

นี่คือทางออกของฉัน:

img.center {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
}

translateX ได้รับการสนับสนุนโดยเบราว์เซอร์ส่วนใหญ่

ฉันค้นพบว่าถ้าฉันมีภาพและข้อความบางส่วนอยู่ภายใน a divจากนั้นฉันสามารถใช้text-align:centerเพื่อจัดตำแหน่งข้อความและภาพในรูปเดียว

HTML:

    <div class="picture-group">
        <h2 class="picture-title">Picture #1</h2>
        <img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
        <p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
    </div>

CSS:

.picture-group {
  border: 1px solid black;
  width: 25%;
  float: left;
  height: 300px;
  #overflow:scroll;
  padding: 5px;
  text-align:center;
}

CodePen: https://codepen.io/artforlife/pen/MoBzrL?editors=1100

บางครั้งเราเพิ่มเนื้อหาและรูปภาพโดยตรงบนผู้ดูแลระบบ WordPress ภายในหน้า เมื่อเราแทรกรูปภาพภายในเนื้อหาและต้องการจัดตำแหน่งกึ่งกลางนั้น รหัสจะแสดงเป็น:

 **<p><img src="https://abcxyz.com/demo/wp-content/uploads/2018/04/1.jpg" alt=""></p>**

ในกรณีนี้คุณสามารถเพิ่มเนื้อหา CSS ดังนี้:

article p img{
    margin: 0 auto;
    display: block;
    text-align: center;
    float: none;
}

ใช้:

<dev class="col-sm-8" style="text-align: center;"><img src="{{URL('image/car-trouble-with-clipping-path.jpg')}}" ></dev>

ฉันคิดว่านี่เป็นวิธีที่จะจัดกึ่งกลางของภาพในกรอบงาน Laravel

.img-container {
  display: flex;
}

img {
  margin: auto;
}

สิ่งนี้จะทำให้ศูนย์กลางภาพทั้งในแนวตั้งและแนวนอน