248

Tôi đã xem xét cú pháp đánh dấu được sử dụng trong GitHub một thời gian nhưng ngoại trừ thay đổi kích thước hình ảnh trong phạm vi trang readme.md, tôi không thể tìm ra cách căn giữa hình ảnh trong đó.

Có thể không? Nếu là nó, làm thế nào?

|
  • Pandoc đã đề xuất một cú pháp chung để mô tả nội dung văn bản, nếu nó trở thành một phần của tiêu chuẩn Markdown, sẽ tạo điều kiện cho việc định tâm hình ảnh.

    – Lê Ðức Mạnh 15:53:52 29/06/2017
126

Tôi đã xem cú pháp đánh dấu được sử dụng trong github [...], tôi không thể tìm ra cách căn giữa hình ảnh

TL; DR

Không, bạn không thể chỉ bằng cách dựa vào cú pháp Markdown. Markdown không quan tâm đến định vị.

Lưu ý: Một số bộ xử lý markdown hỗ trợ bao gồm HTML (như được chỉ ra đúng bởi @ waldyr.ar) và trong trường hợp GitHub, bạn có thể dự phòng một cái gì đó như <div style="text-align:center"><img src ="..." /></div>. Lưu ý rằng không có gì đảm bảo hình ảnh sẽ được căn giữa nếu kho lưu trữ của bạn bị rẽ nhánh trong một môi trường lưu trữ khác (Codeplex, BitBucket, ...) hoặc nếu tài liệu không được đọc qua trình duyệt (Xem trước văn bản Sublime, MarkdownPad, VisualStudio Web Bản xem trước thiết yếu Markdown, ...).

Lưu ý 2: Hãy nhớ rằng ngay cả trong trang web GitHub, cách hiển thị đánh dấu không đồng nhất. Wiki, ví dụ, sẽ không cho phép lừa đảo vị trí css như vậy.

Phiên bản không rút gọn

Các cú pháp Markdown không cung cấp một với khả năng kiểm soát vị trí của một hình ảnh.

Trong thực tế, nó sẽ là đường biên giới chống lại triết lý Markdown để cho phép định dạng như vậy, như đã nêu trong "Triết học" phần

"Một tài liệu có định dạng Markdown phải được xuất bản nguyên trạng, dưới dạng văn bản thuần túy, mà không trông giống như nó được đánh dấu bằng các thẻ hoặc hướng dẫn định dạng."

Các tệp Markdown được hiển thị bởi trang web github.com thông qua việc sử dụng thư viện Ruby Redcarpet .

Redcarpet trưng bày một số tiện ích mở rộng (chẳng hạn như gạch ngang, chẳng hạn) không phải là một phần của cú pháp Markdown tiêu chuẩn và cung cấp thêm "tính năng". Tuy nhiên, không có tiện ích mở rộng được hỗ trợ nào cho phép bạn căn giữa hình ảnh.

|
  • 1

    Cảm ơn bạn, tôi đã giải quyết bằng cách kích thước quá mức của hình ảnh. Đáng tiếc cho băng thông của họ nhưng họ không để tôi lựa chọn

    – Đặng Thiên An 17:43:24 23/08/2012
  • 1

    Điều này hoạt động tốt:<img align="..." src="..." alt="...">

    – Phạm Kim Thư 02:17:08 31/01/2013
  • 1

    @JohonnyPaending, nếu bạn lo lắng về việc không sử dụng quá nhiều băng thông github, bạn có thể xem Raw Git , phục vụ các tệp được lưu trữ trên GitHub, lưu trữ chúng trên hệ thống của họ. Vì vậy, chỉ cần một lần truy cập được thực hiện trên tài nguyên trên GitHub, lưu lại băng thông của họ.

    – Hoàng Thanh Trung 13:14:42 15/02/2015
  • 1

    Đánh dấu gốc xử lý cú pháp đánh dấu trong thẻ span. Vì vậy, một số điều như sau nên hoạt động: <span style="display:block;text-align:center">![Test Automation]Automated-Testing.png)</span>

    – Võ Khắc Vũ 10:01:59 27/08/2017
  • 1

    Các alignthuộc tính trên một imgthẻ bị phản đối như của HTML 4.01 và lạc hậu như của HTML5.

    – Đỗ Ðức Phi 23:20:30 12/05/2018
495

Đây là từ hỗ trợ của Github:

Này Waldyr,

Markdown không cho phép bạn điều chỉnh căn chỉnh trực tiếp (xem tài liệu tại đây: http://daredfireball.net/projects/markdown/syntax#img ), nhưng bạn chỉ có thể sử dụng thẻ 'img' HTML thô và thực hiện căn chỉnh với nội tuyến css.

Chúc mừng

Vì vậy, nó có thể căn chỉnh hình ảnh! Bạn chỉ cần sử dụng css nội tuyến để giải quyết vấn đề. Bạn có thể lấy một ví dụ từ repo github của tôi . Ở dưới cùng của README.md có một hình ảnh được căn giữa. Để đơn giản, bạn có thể làm như sau:

<p align="center">
  <img />
</p>

Mặc dù, như nulltoken đã nói, nó sẽ là ranh giới chống lại triết lý Markdown!

|
  • 1

    Tại sao đây không phải là câu trả lời được chấp nhận mà tôi không biết. Câu trả lời này thực sự giải thích cho người hỏi làm thế nào để hoàn thành nhiệm vụ.

    – Đặng Thiên An 21:18:45 14/11/2012
  • 1

    +1, tôi không quan tâm nếu điều này trái với triết lý đánh dấu, tôi chỉ muốn tập trung vào một hình ảnh! : D

    – Phạm Kim Thư 10:09:24 02/02/2013
  • 1

    Vâng, với triết lý đánh dấu, hãy để chúng tôi làm cho mọi thứ trở nên đẹp hơn: p

    – Hoàng Thanh Trung 12:20:47 12/10/2013
  • 1

    Điều này dường như hoạt động (như đã thấy trong repo của người đăng), nhưng CSS KHÔNG được hỗ trợ trong wiki Github. Mọi nỗ lực tôi đã thực hiện để chỉ định CSS đã bị loại bỏ. Tương tự, thuộc tính align được chỉ định cũng bị xóa khi tôi thử làm điều này trong wiki.

    – Võ Khắc Vũ 01:04:44 17/01/2014
  • 1

    đã không làm việc với tôi trong GitHub. <p align="center"><img src="image" /></p>cũng không <p style="align:center"><img src="image" /></p>phải với athẻ, v.v.

    – Đỗ Ðức Phi 12:22:56 16/04/2015
28

Ngoài ra, nếu bạn có quyền kiểm soát css, bạn có thể thông minh với các tham số url và css .

Đánh dấu

![A cute kitten](http://placekitten.com/200/300?style=centerme)

Và CSS:

img[src$="centerme"] {
  display:block;
  margin: 0 auto;
}

Bạn có thể tạo một loạt các tùy chọn kiểu dáng theo cách này và vẫn giữ cho phần đánh dấu sạch sẽ thêm mã. Tất nhiên, bạn không có quyền kiểm soát những gì xảy ra nếu người khác sử dụng đánh dấu ở một nơi khác nhưng đó là vấn đề về kiểu dáng chung với tất cả các tài liệu đánh dấu mà một người chia sẻ.

|
26

Nó hoạt động với tôi trên github

<p align="center"> 
<img src="...">
</p>
|
12

Đối với căn lề trái

 <img align="left" width="600" height="200" src="https://www.python.org/python-.png">

Đối với căn lề phải

<img align="right" width="600" height="200" src="https://www.python.org/python-.png">

Và để căn chỉnh trung tâm

<p align="center">
  <img width="600" height="200" src="https://www.python.org/python-.png">
</p>

Ngã ba nó ở đây để tham khảo trong tương lai, nếu bạn thấy điều này hữu ích.

|
6

Bạn cũng có thể thay đổi kích thước hình ảnh theo chiều rộngchiều cao mong muốn . Ví dụ:

<p align="center">
  <img src="https://anyserver.com/image.png" width="750px" height="300px"/></p>

Để thêm chú thích chính giữa cho hình ảnh, chỉ cần thêm một dòng:

<p align="center">This is a centered caption for the image<p align="center">

May mắn thay, điều này hoạt động cả cho các trang README.md và GitHub Wiki.

|
4

Chúng ta có thể sử dụng điều này. Vui lòng thay đổi vị trí src của ur img từ thư mục git và thêm văn bản thay thế nếu img không được tải

 <p align="center"> 
    <img src="ur img url here" alt="alternate text">
 </p>
|
4

Để mở rộng câu trả lời một chút để hỗ trợ hình ảnh cục bộ, chỉ cần thay thế FILE_PATH_PLACEHOLDER vào đường dẫn hình ảnh của bạn và kiểm tra nó.

<p align="center">
  <img src="FILE_PATH_PLACEHOLDER">
</p>
|
2

Cách của tôi để giải quyết vấn đề với định vị hình ảnh là sử dụng các thuộc tính HTML:

![Image](Image.svg){ width="800" height="600" style="display: block; margin: 0 auto" }

Hình ảnh đã được thay đổi kích thước và căn giữa đúng cách, ít nhất là trong trình kết xuất đánh dấu VS cục bộ của tôi.

Sau đó, tôi đã đẩy các thay đổi sang repo và không may nhận ra rằng nó không hoạt động đối với tệp GitHub README.md . Tuy nhiên, tôi sẽ để lại câu trả lời này vì nó có thể giúp đỡ người khác.

Vì vậy, cuối cùng, tôi đã kết thúc bằng cách sử dụng thẻ HTML cũ tốt:

<img src="Image.svg" alt="Image" width="800" height="600" style="display: block; margin: 0 auto" />

Nhưng đoán xem? Một số phương thức JS đã thay thế stylethuộc tính của tôi ! Tôi thậm chí đã thử classthuộc tính và với kết quả tương tự!

Sau đó, tôi đã tìm thấy trang chính sau khi sử dụng HTML trường học cũ hơn:

<p align="center">
    <img src="Image.svg" alt="Image" width="800" height="600" />
</p>

Điều này đang hoạt động tốt, tuy nhiên, tôi muốn để lại mà không có ý kiến ​​thêm ...

|

Câu trả lời của bạn (> 20 ký tự)

Bằng cách click "Đăng trả lời", bạn đồng ý với Điều khoản dịch vụ, Chính sách bảo mật and Chính sách cookie của chúng tôi.

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ hoặc hỏi câu hỏi của bạn.