使用标记,如何将图像及其标题居中?

您需要一个具有定义高度的块容器,行高和垂直对齐图像的值相同:middle; 它应该有用。

Hello there !

<div id="container">
    <img />
    This is an image
</div>

Hi !

#container {
    height:100px;
    line-height:100px;
}

#container img {
    vertical-align:middle;
    max-height:100%;
}

所以我的代码如下:

Hello there!

      <center><img src="" ...></center>
      <center>This is an image</center>

Hi!

我想我有一个简单的解决方案,你可以定义CSS。它也不需要任何扩展或HTML!首先你的降价图像代码:

![my image](/img/myImage.jpg#center)  

注意添加的url散列中心。

现在在CSS中添加此规则:

img[src*='#center'] { 
    display: block;
    margin: auto;
}

要查看实际效果,请查看我的JSFiddle,它使用SnarkDown来解析文本区域中的MarkDown- https://jsfiddle.net/tremor/6s30e8vr/

kramdown

Hello there!

{:.center}
![cardinal](/img/2012/cardinal.jpg)  
This is an image

Hi!

.center {
  text-align: center;
}

在 Mou (也许还有杰基尔)这很简单。

-> This is centered Text <-

考虑到这一点,您可以将其应用于img语法。

->![alt text](/link/to/img)<-

Daring Fireball .

{: style="text-align:center"}
That is, while there is value in the items on
the right, we value the items on the left more.

或者使用@的回复(史蒂文·彭妮)

{:.mycenter}
That is, while there is value in the items on
the right, we value the items on the left more.

<style>
.mycenter {
    text-align:center;
}
</style>

我很惊讶没有人这样说:

Hello there!

<p align="center">

  <img src="">
  This is an image

</p>

Hi!