TLDR;
ใช้ HTML / CSS นี้เพื่อเพิ่มและจัดกึ่งกลางภาพและกำหนดขนาดเป็น 60% ของความกว้างของพื้นที่หน้าจอในไฟล์ markdown ของคุณซึ่งโดยปกติจะเป็นค่าเริ่มต้นที่ดี:
<img src="https://i.stack.imgur.com/RJj4x.png"
style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
เปลี่ยนwidthค่า CSS เป็นเปอร์เซ็นต์ที่คุณต้องการหรือลบออกพร้อมกันเพื่อใช้ขนาดเริ่มต้น markdown ซึ่งฉันคิดว่าเป็น 100% ของความกว้างของหน้าจอหากภาพมีขนาดใหญ่กว่าหน้าจอหรือเป็นความกว้างของภาพที่แท้จริง
ทำ!
หรืออ่านต่อเพื่ออ่านข้อมูลเพิ่มเติม
นี่คือตัวเลือก HTML และ CSS ต่างๆที่ทำงานอย่างสมบูรณ์ในไฟล์ markdown:
1. จัดกึ่งกลางและกำหนดค่า (ปรับขนาด) ภาพทั้งหมดในไฟล์ markdown ของคุณ:
เพียงแค่คัดลอกและวางสิ่งนี้ไว้ที่ด้านบนสุดของไฟล์มาร์กอัปของคุณเพื่อจัดกึ่งกลางและปรับขนาดภาพทั้งหมดในไฟล์ (จากนั้นใส่ภาพใด ๆ ที่คุณต้องการด้วยไวยากรณ์มาร์กอัปปกติ):
<style>
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
</style>
หรือนี่คือรหัสเดียวกันกับด้านบน แต่มีความคิดเห็น HTML และ CSS โดยละเอียดเพื่ออธิบายสิ่งที่เกิดขึ้นอย่างแน่นอน:
<!-- (This is an HTML comment). Copy and paste this entire HTML `<style>...</style>` element (block)
to the top of your markdown file -->
<style>
/* (This is a CSS comment). The below `img` style sets the default CSS styling for all images
hereafter in this markdown file. */
img
{
/* Default display value is `inline-block`. Set it to `block` to prevent surrounding text from
wrapping around the image. Instead, `block` format will force the text to be above or below the
image, but never to the sides. */
display:block;
/* Common float options are `left`, `right`, and `none`. Set to `none` to override any previous
settings which might have been `left` or `right`. `left` causes the image to be to the left,
with text wrapped to the right of the image, and `right` causes the image to be to the right,
with text wrapped to its left, so long as `display:inline-block` is also used. */
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
/* You may also set the size of the image, in percent of width of the screen on which the image
is being viewed, for example. A good starting point is 60%. It will auto-scale and auto-size
the image no matter what screen or device it is being viewed on, maintaining proporptions and
not distorting it. */
width:60%;
/* You may optionally force a fixed size, or intentionally skew/distort an image by also
setting the height. Values for `width` and `height` are commonly set in either percent (%)
or pixels (px). Ex: `width:100%;` or `height:600px;`. */
/* height:400px; */
}
</style>
ตอนนี้ไม่ว่าคุณจะแทรกรูปภาพโดยใช้ markdown:
หรือ HTML ในไฟล์ markdown ของคุณ:
<img src="https://i.stack.imgur.com/RJj4x.png">
... มันจะถูกจัดกึ่งกลางโดยอัตโนมัติและปรับขนาดให้เท่ากับ 60% ของความกว้างของหน้าจอตามที่อธิบายไว้ในความคิดเห็นภายใน HTML และ CSS ด้านบน (แน่นอนว่าขนาด 60% นั้นสามารถเปลี่ยนแปลงได้ง่ายเช่นกันและฉันก็นำเสนอวิธีง่าย ๆ ด้านล่างเพื่อทำแบบทีละภาพเช่นกัน)
2. จัดกึ่งกลางและกำหนดค่ารูปภาพเป็นรายกรณีทีละภาพ:
ไม่ว่าคุณจะคัดลอกและวาง<style>บล็อกด้านบนลงในด้านบนของไฟล์ markdown แล้วมันก็จะทำงานเช่นเดียวกับที่มันจะแทนที่และมีความสำคัญเหนือกว่าการตั้งค่ารูปแบบขอบเขตไฟล์ที่คุณอาจตั้งไว้ด้านบน:
<img src="https://i.stack.imgur.com/RJj4x.png" style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
คุณสามารถจัดรูปแบบในหลายบรรทัดเช่นนี้และยังสามารถใช้งานได้:
<img src="https://i.stack.imgur.com/RJj4x.png"
alt="this is an optional description of the image to help the blind and show up in case the
image won't load"
style="display:block; /* override the default display setting of `inline-block` */
float:none; /* override any prior settings of `left` or `right` */
/* set both the left and right margins to `auto` to center the image */
margin-left:auto;
margin-right:auto;
width:60%; /* optionally resize the image to a screen percentage width if you want too */
">
3. นอกเหนือจากทั้งหมดข้างต้นคุณยังสามารถสร้าง CSS สไตล์คลาสเพื่อช่วยจัดระเบียบรูปภาพแต่ละภาพ:
เพิ่มสิ่งทั้งหมดนี้ไปด้านบนของไฟล์ markdown ของคุณ
<style>
/* By default, make all images center-aligned, and 60% of the width
of the screen in size */
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
}
</style>
ตอนนี้imgบล็อก CSS ของคุณได้ตั้งค่าเริ่มต้นสำหรับภาพที่จะอยู่กึ่งกลางและ 60% ของความกว้างของพื้นที่หน้าจอในขนาด แต่คุณสามารถใช้คลาสleftAlignและrightAlignCSS เพื่อแทนที่การตั้งค่าเหล่านั้นในแบบภาพต่อภาพ
ตัวอย่างเช่นภาพนี้จะจัดกึ่งกลางและขนาด 60% (ค่าเริ่มต้นที่ฉันตั้งไว้ด้านบน):
<img src="https://i.stack.imgur.com/RJj4x.png">
ภาพนี้จะจัดชิดซ้ายแต่ด้วยการตัดข้อความทางด้านขวาโดยใช้leftAlignคลาส CSS ที่เราเพิ่งสร้างขึ้นด้านบน!
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign">
อาจมีลักษณะเช่นนี้:
คุณยังสามารถแทนที่คุณสมบัติ CSS ใด ๆ ของมันผ่านแอstyleททริบิวต์เช่นความกว้างเช่นนี้
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign" style="width:20%">
และตอนนี้คุณจะได้รับสิ่งนี้:
4. สร้าง 3 CSS คลาส แต่อย่าเปลี่ยนimgค่าเริ่มต้นของ markdown
ตัวเลือกอื่นสำหรับสิ่งที่เราเพิ่งแสดงด้านบนซึ่งเราปรับเปลี่ยนการimg property:valueตั้งค่าเริ่มต้นและสร้าง 2 คลาสคือให้ปล่อยimgคุณสมบัติเริ่มต้นทั้งหมดเพียงอย่างเดียว แต่สร้าง CSS คลาสที่กำหนดเอง 3 ตัวดังนี้:
<style>
/* Create a CSS class to style images to center-align */
.centerAlign
{
display:block;
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
width:60%;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
width:60%;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
width:60%;
}
</style>
ใช้แน่นอนเช่นนี้:
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign" style="width:20%">
โปรดสังเกตว่าฉันตั้งค่าwidthคุณสมบัติด้วยตนเองโดยใช้styleแอตทริบิวต์CSS ด้านบน แต่ถ้าฉันมีสิ่งที่ซับซ้อนกว่าที่ฉันต้องการฉันสามารถสร้างคลาสเพิ่มเติมเช่นนี้ได้โดยเพิ่มพวกมันไว้ใน<style>...</style>บล็อกด้านบน:
/* custom CSS class to set a predefined "small" size for an image */
.small
{
width:20%;
/* set any other properties, as desired, inside this class too */
}
ตอนนี้คุณสามารถกำหนดคลาสหลายคลาสให้กับวัตถุเดียวกันได้เช่นนี้ เพียงแค่ชื่อชั้นโดยแยกพื้นที่ไม่จุลภาค ในกรณีที่มีการตั้งค่าที่ขัดแย้งกันฉันเชื่อว่าการตั้งค่าใดก็ตามที่ผ่านมาจะเป็นสิ่งที่มีผลบังคับใช้แทนที่การตั้งค่าที่ตั้งไว้ก่อนหน้านี้ นี่ควรเป็นกรณีในกรณีที่คุณตั้งค่าคุณสมบัติ CSS เดียวกันหลายครั้งในคลาส CSS เดียวกันหรือภายในstyleแอตทริบิวต์HTML เดียวกัน
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign small">
5. รวมการตั้งค่าร่วมในคลาส CSS:
เคล็ดลับสุดท้ายคือสิ่งที่ฉันได้เรียนรู้ในคำตอบนี้ที่นี่: ฉันจะใช้ CSS เพื่อจัดรูปแบบภาพหลายภาพแตกต่างกันอย่างไร . ดังที่คุณเห็นด้านบนalignคลาสCSS ทั้ง 3 กำหนดความกว้างของรูปภาพเป็น 60% ดังนั้นการตั้งค่าทั่วไปนี้สามารถตั้งค่าทั้งหมดในครั้งเดียวเช่นนี้หากคุณต้องการจากนั้นคุณสามารถตั้งค่าเฉพาะสำหรับแต่ละชั้นเรียนในภายหลัง:
<style>
/* set common properties for multiple CSS classes all at once */
.centerAlign, .leftAlign, .rightAlign {
width:60%;
}
/* Now set the specific properties for each class individually */
/* Create a CSS class to style images to center-align */
.centerAlign
{
display:block;
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
}
/* custom CSS class to set a predefined "small" size for an image */
.small
{
width:20%;
/* set any other properties, as desired, inside this class too */
}
</style>
รายละเอียดเพิ่มเติม:
1. ความคิดของฉันเกี่ยวกับ HTML และ CSS ใน Markdown
เท่าที่ฉันกังวลอะไรก็ตามที่สามารถเขียนลงในเอกสารมาร์กดาวน์และได้รับผลลัพธ์ที่ต้องการคือสิ่งที่เราเป็นหลังจากไม่ใช่ไวยากรณ์ "บริสุทธิ์มาร์กดาวน์"
ใน C และ C ++ คอมไพเลอร์จะรวบรวมรหัสแอสเซมบลีจากนั้นแอสเซมบลีจะถูกรวมเข้ากับไบนารี อย่างไรก็ตามในบางครั้งคุณต้องการตัวควบคุมระดับต่ำที่แอสเซมบลีเท่านั้นที่สามารถให้ได้และเพื่อให้คุณสามารถเขียนแอสเซมบลีแบบอินไลน์ภายในไฟล์ต้นฉบับ C หรือ C ++ แอสเซมบลีเป็นภาษา "ระดับต่ำกว่า" และสามารถเขียนได้ใน C และ C ++
ดังนั้นมันจึงมีเครื่องหมาย Markdown เป็นภาษาระดับสูงซึ่งแปลเป็น HTML และ CSS อย่างไรก็ตามที่เราต้องการการควบคุมพิเศษเราสามารถ "อินไลน์" HTML และ CSS ระดับต่ำกว่าลงในไฟล์ markdown ของเราและมันจะถูกตีความอย่างถูกต้อง ดังนั้น HTML และ CSS จึงเป็นไวยากรณ์ "markdown" ที่ถูกต้อง
ดังนั้นหากต้องการจัดภาพให้อยู่กึ่งกลางใน markdown ใช้ HTML และ CSS
2. การแทรกรูปภาพมาตรฐานใน markdown:
วิธีเพิ่มรูปภาพพื้นฐานใน markdown ด้วยการเริ่มต้น "behind-the-scenes" การจัดรูปแบบ HTML และ CSS:
markdown นี้:
จะสร้างผลลัพธ์นี้:
นี่คือฉันไฟยิง hexacopter ฉันทำ
คุณยังสามารถเลือกเพิ่มคำอธิบายในวงเล็บเปิดได้ จริงๆแล้วฉันไม่แน่ใจด้วยซ้ำว่ามันทำอะไร แต่บางทีมันอาจถูกแปลงเป็นคุณลักษณะองค์ประกอบHTML<img>altซึ่งแสดงในกรณีที่ภาพไม่สามารถโหลดได้และอาจถูกอ่านโดยผู้อ่านหน้าจอสำหรับคนตาบอด ดังนั้น markdown นี้:
จะผลิตผลลัพธ์นี้:
3. รายละเอียดเพิ่มเติมเกี่ยวกับสิ่งที่เกิดขึ้นใน HTML / CSS เมื่ออยู่ตรงกลางและปรับขนาดภาพใน markdown:
การจัดวางรูปภาพไว้ตรงกลางใน markdown ต้องการให้เราใช้การควบคุมพิเศษที่ HTML และ CSS สามารถให้เราได้โดยตรง คุณสามารถแทรกและจัดกึ่งกลางภาพแต่ละภาพเช่นนี้:
<img src="https://i.stack.imgur.com/RJj4x.png"
alt="this is my hexacopter I built"
style="display:block;
float:none;
margin-left:auto;
margin-right:auto;
">
นี่คือข้อมูลเพิ่มเติม สิ่งที่เกิดขึ้นที่นี่:
<imgส่วนหนึ่งของโค้ดข้างต้นเป็น HTML " แท็กเริ่มต้น " ในขณะที่>ในตอนท้ายเป็น HTML ที่ " แท็กสิ้นสุด "- ทุกอย่างจากแท็กเริ่มต้นไปยังแท็กท้ายที่สุดรวมทำให้ขึ้น HTML นี้
img" องค์ประกอบ " นี้
- HTML
img "แท็ก" / "องค์ประกอบ"ใช้สำหรับแทรกรูปภาพใน HTML
- แต่ละการมอบหมายภายในองค์ประกอบกำลังกำหนดค่าแอตทริบิวต์ HTML " "
- แอตทริบิวต์ "สไตล์"ยอมรับCSS สไตล์เพื่อให้ทุกอย่างภายในราคาคู่ที่นี่:
style=""เป็น CSS property:valueค่าคีย์ " ประกาศ "
- โปรดทราบว่าแต่ละ CSS "คุณสมบัติ: การประกาศมูลค่า" คั่นด้วยเครื่องหมายอัฒภาค (
;) ในขณะที่ HTML "แอตทริบิวต์" ใน "องค์ประกอบ" แต่ละรายการนี้คั่นด้วยช่องว่าง (
- หากต้องการให้รูปภาพอยู่กึ่งกลางในโค้ด HTML และ CSS ของเราด้านบนคีย์ "attribute" นั้นง่าย
srcและstyleคน
-
altหนึ่งเป็นตัวเลือก
- ภายในของ HTML
styleแอตทริบิวต์ที่รับจัดแต่งทรงผม CSS, การประกาศที่สำคัญคือทั้ง 4 ที่ผมแสดง: display:block, float:none, margin-left:autoและmargin-right:autoและ
- ถ้าไม่มีอะไรได้ตั้งค่าคุณสมบัติก่อนหน้า
float นี้มาก่อนคุณสามารถละทิ้งการประกาศนี้ได้
- หากได้เรียนรู้วิธีแรกไปยังศูนย์ภาพโดยใช้ HTML และ CSS ที่นี่: https://www.w3schools.com/howto/howto_css_image_center.asp
- CSS ใช้ความคิดเห็นแบบ C (
/* my comment */)
อ้างอิง:
- อ่านเพิ่มเติมเกี่ยวกับไวยากรณ์ CSS ได้ที่นี่: https://www.w3schools.com/css/css_syntax.asp
- อ่านข้อมูลเกี่ยวกับ"แท็ก HTML VS องค์ประกอบ" ที่นี่
- ฉันใช้ HTML และ CSS ในการฝึกการใส่สไตล์ในการอ่าน markdown ของ GitHub ที่นี่: https://github.com/ElectricRCAircraftGuy/Arduino-STEM-Presentation
- ฉันเรียนรู้ทุกสิ่งที่ฉันรู้เกี่ยวกับ HTML และ CSS โดยคลิกที่ w3schools.com นี่คือหน้าเฉพาะบางหน้า:
- %%%%% https://www.w3schools.com/howto/howto_css_image_center.asp
- https://www.w3schools.com/css/css_float.asp
- https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float2
- https://www.w3schools.com/css/css3_images.asp
- https://www.w3schools.com/tags/default.asp
- ความคิดเห็น HTML และ CSS: https://www.w3schools.com/css/css_comments.asp
- hexacopter ที่ยิงออกมาของฉันที่ฉันทำ: https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html
