TLDR;
Sử dụng HTML / CSS này để thêm và căn giữa hình ảnh và đặt kích thước của nó thành 60% chiều rộng không gian màn hình bên trong tệp đánh dấu của bạn, thường là một giá trị khởi đầu tốt:
<img src="https://i.stack.imgur.com/RJj4x.png"
style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
Thay đổi width giá trị CSS thành bất kỳ tỷ lệ phần trăm nào bạn muốn hoặc loại bỏ hoàn toàn để sử dụng kích thước mặc định đánh dấu, mà tôi nghĩ là 100% chiều rộng màn hình nếu hình ảnh lớn hơn màn hình hoặc nếu không thì đó là chiều rộng hình ảnh thực tế.
Làm xong!
Hoặc, tiếp tục đọc để biết thêm thông tin.
Dưới đây là các tùy chọn HTML và CSS khác nhau hoạt động hoàn hảo bên trong các tệp đánh dấu:
1. Căn giữa và định cấu hình (thay đổi kích thước) TẤT CẢ hình ảnh trong tệp đánh dấu của bạn:
Chỉ cần sao chép và dán tệp này lên đầu tệp đánh dấu của bạn để căn giữa và thay đổi kích thước tất cả các hình ảnh trong tệp (sau đó chỉ cần chèn bất kỳ hình ảnh nào bạn muốn với cú pháp đánh dấu bình thường):
<style>
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
</style>
Hoặc, đây là cùng một mã như trên nhưng với các nhận xét chi tiết về HTML và CSS để giải thích chính xác những gì đang diễn ra:
<!-- (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>
Bây giờ, cho dù bạn chèn một hình ảnh bằng cách sử dụng markdown:
Hoặc HTML trong tệp đánh dấu của bạn:
<img src="https://i.stack.imgur.com/RJj4x.png">
... nó sẽ được tự động căn giữa và có kích thước tới 60% chiều rộng màn hình, như được mô tả trong các nhận xét trong HTML và CSS ở trên. (Tất nhiên kích thước 60% cũng thực sự dễ dàng thay đổi và tôi cũng trình bày những cách đơn giản dưới đây để thực hiện trên cơ sở từng hình ảnh).
2. Căn giữa và định cấu hình hình ảnh trên cơ sở từng trường hợp cụ thể, từng hình một:
Cho dù bạn có sao chép và dán <style>khối ở trên vào đầu tệp đánh dấu của mình hay không, điều này cũng sẽ hoạt động, vì nó sẽ ghi đè và được ưu tiên hơn bất kỳ cài đặt kiểu phạm vi tệp nào bạn có thể đặt ở trên:
<img src="https://i.stack.imgur.com/RJj4x.png" style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
Bạn cũng có thể định dạng nó trên nhiều dòng, như thế này và nó vẫn sẽ hoạt động:
<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. Ngoài tất cả những điều trên, bạn cũng có thể tạo các lớp kiểu CSS để giúp cách điệu các hình ảnh riêng lẻ:
Thêm toàn bộ điều này vào đầu tập tin đánh dấu của bạn.
<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>
Bây giờ, imgkhối CSS của bạn đã đặt cài đặt mặc định cho hình ảnh được căn giữa và 60% chiều rộng của không gian màn hình về kích thước, nhưng bạn có thể sử dụng các lớp leftAlignvà rightAlignCSS để ghi đè các cài đặt đó trên cơ sở từng hình ảnh.
Ví dụ: hình ảnh này sẽ được căn giữa và kích thước 60% (mặc định tôi đặt ở trên):
<img src="https://i.stack.imgur.com/RJj4x.png">
Hình ảnh này sẽ được căn trái , tuy nhiên, với gói văn bản ở bên phải, sử dụng leftAlignlớp CSS mà chúng ta vừa tạo ở trên!
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign">
Nó có thể trông như thế này:
Tuy nhiên, bạn vẫn có thể ghi đè bất kỳ thuộc tính CSS nào của nó thông qua stylethuộc tính , chẳng hạn như chiều rộng, như sau:
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign" style="width:20%">
Và bây giờ bạn sẽ nhận được điều này:
4. Tạo 3 lớp CSS, nhưng không thay đổi imgmặc định đánh dấu
Một tùy chọn khác cho những gì chúng tôi vừa trình bày ở trên, nơi chúng tôi đã sửa đổi img property:valuecài đặt mặc định và tạo 2 lớp, là chỉ để lại tất cả các imgthuộc tính đánh dấu mặc định , nhưng tạo 3 lớp CSS tùy chỉnh, như sau:
<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>
Sử dụng chúng, tất nhiên, như thế này:
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign" style="width:20%">
Lưu ý cách tôi đặt thuộc tính theo cách thủ công bằng cách widthsử dụng stylethuộc tính CSS ở trên, nhưng nếu tôi muốn làm gì đó phức tạp hơn, tôi cũng có thể tạo một số lớp bổ sung như thế này, thêm chúng vào bên trong <style>...</style>khối ở trên:
/* 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 */
}
Bây giờ bạn có thể gán nhiều lớp cho cùng một đối tượng, như thế này. Đơn giản chỉ cần tách tên lớp bằng một khoảng trắng, KHÔNG phải dấu phẩy . Trong trường hợp cài đặt xung đột, tôi tin rằng cài đặt nào đến sau cùng sẽ là một trong đó có hiệu lực, trọng bất kỳ cài đặt trước đó được thiết lập. Điều này cũng nên là trường hợp trong trường hợp bạn thiết lập các tính chất tương tự CSS nhiều lần trong các lớp CSS cùng hoặc bên trong HTML cùng stylethuộc tính.
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign small">
5. Hợp nhất các cài đặt chung trong các lớp CSS:
Bí quyết cuối cùng là một mẹo tôi đã học được trong câu trả lời này ở đây: Làm thế nào tôi có thể sử dụng CSS để tạo kiểu cho nhiều hình ảnh khác nhau? . Như bạn có thể thấy ở trên, cả 3 alignlớp CSS đều đặt chiều rộng hình ảnh thành 60%. Do đó, cài đặt chung này có thể được đặt cùng một lúc như thế này nếu bạn muốn, sau đó bạn có thể đặt cài đặt cụ thể cho từng lớp sau đó:
<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>
Thêm chi tiết:
1. Suy nghĩ của tôi về HTML và CSS trong Markdown
Theo như tôi quan tâm, bất cứ điều gì có thể được viết trong một tài liệu đánh dấu và nhận được kết quả mong muốn là tất cả những gì chúng ta có sau đó, không phải là một cú pháp "đánh dấu thuần túy".
Trong C và C ++, trình biên dịch biên dịch thành mã lắp ráp và sau đó lắp ráp được lắp ráp thành nhị phân. Tuy nhiên, đôi khi, bạn cần điều khiển mức thấp mà chỉ lắp ráp có thể cung cấp và do đó bạn có thể viết lắp ráp nội tuyến ngay bên trong tệp nguồn C hoặc C ++. Hội là ngôn ngữ "cấp thấp hơn" và nó có thể được viết ngay bên trong C và C ++.
Vì vậy, nó là với markdown. Markdown là ngôn ngữ cấp cao được hiểu theo HTML và CSS. Tuy nhiên, khi chúng tôi cần kiểm soát bổ sung, chúng tôi chỉ có thể "nội tuyến" HTML và CSS cấp thấp hơn ngay bên trong tệp đánh dấu của mình và nó vẫn sẽ được giải thích chính xác. Do đó, theo một nghĩa nào đó, HTML và CSS là cú pháp "đánh dấu" hợp lệ.
Vì vậy, để căn giữa một hình ảnh trong markdown, hãy sử dụng HTML và CSS.
2. Chèn hình ảnh tiêu chuẩn trong markdown:
Cách thêm hình ảnh cơ bản trong đánh dấu với định dạng HTML và CSS "hậu trường" mặc định:
Đánh dấu này:
Sẽ sản xuất đầu ra này:
Đây là hexacopter bắn lửa của tôi, tôi đã thực hiện .
Bạn cũng có thể tùy ý thêm một mô tả trong dấu ngoặc vuông mở. Thành thật mà nói tôi thậm chí không chắc chắn điều đó là gì, nhưng có lẽ nó được chuyển đổi thành thuộc tính phần tử HTML<img>alt , được hiển thị trong trường hợp hình ảnh không thể tải và có thể được đọc bởi trình đọc màn hình cho người mù. Vì vậy, đánh dấu này:
cũng sẽ tạo ra sản phẩm này:
3. Thêm chi tiết về những gì đang xảy ra trong HTML / CSS khi căn giữa và thay đổi kích thước hình ảnh trong đánh dấu:
Căn giữa hình ảnh trong markdown yêu cầu chúng tôi sử dụng điều khiển bổ sung mà HTML và CSS có thể cung cấp cho chúng tôi trực tiếp. Bạn có thể chèn và căn giữa một hình ảnh riêng lẻ như thế này:
<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;
">
Đây là thông tin thêm. về những gì đang xảy ra ở đây:
- Một
<imgphần của đoạn mã trên là " thẻ bắt đầu " HTML , trong khi >ở cuối là thẻ kết thúc "HTML" .
- Tất cả mọi thứ từ thẻ bắt đầu đến thẻ kết thúc, bao gồm, tạo nên phần tử
img " HTML này .
- HTML
img "thẻ" / "phần tử" được sử dụng để chèn hình ảnh vào HTML.
- Mỗi bài tập bên trong phần tử đang cấu hình một thuộc tính "HTML" .
- Các "phong cách" thuộc tính chấp nhận phong cách CSS , vì vậy tất cả mọi thứ bên trong dấu ngoặc kép ở đây:
style=""là một CSS property:valuegiá trị khóa " khai ".
- Lưu ý rằng mỗi "thuộc tính: khai báo giá trị" CSS được phân tách bằng dấu chấm phẩy (
;), trong khi mỗi "thuộc tính" HTML trong "phần tử" này được phân tách bằng dấu cách (
- Để đưa hình ảnh vào trung tâm trong mã HTML và CSS của chúng tôi ở trên, các "thuộc tính" chính chỉ đơn giản là
srcvàstyle .
- Các
alt một là không bắt buộc.
- Bên trong HTML
stylethuộc tính, mà chấp nhận phong cách CSS, tờ khai chính là tất cả 4 mà tôi thấy: display:block, float:none, margin-left:auto, vàmargin-right:auto .
- Nếu trước đó không có gì thiết lập
float tài sản , thì bạn có thể bỏ khai báo này, nhưng dù sao đi nữa cũng nên có nó.
- Nếu lần đầu tiên học cách căn giữa một hình ảnh bằng HTML và CSS tại đây: https://www.w3schools.com/howto/howto_css_image_center.asp .
- CSS sử dụng nhận xét kiểu C (
/* my comment */).
Người giới thiệu:
- Đọc thêm về Cú pháp CSS tại đây: https://www.w3schools.com/css/css_syntax.asp
- Đọc về "Thẻ HTML vs các yếu tố" tại đây .
- Tôi đã thực hiện rất nhiều thực hành tạo kiểu HTML và CSS của mình trong phần đọc đánh dấu GitHub của mình tại đây: https://github.com/ElectricRCAircraftGuy/Arduino-STEM-Pftimeation
- Tôi đã học được mọi thứ tôi biết về HTML và CSS bằng cách nhấp vào w3schools.com. Dưới đây là một vài trang cụ thể:
- %%%%% 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
- Nhận xét về HTML và CSS: https://www.w3schools.com/css/css_comments.asp
- Hexacopter bắn lửa của tôi tôi đã thực hiện: https : //www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html
