TyporaMarkdown中的图片排版技巧,-优快云博客

Typora图片排版

Typora_Markdown_图片排版

单图显示

<div>			<!--块级封装-->
    <center>	<!--将图片和文字居中-->
    <img src="图片路径放这里"
         alt="无法显示图片时显示的文字"
         style="zoom:这里写图片的缩放百分比"/>
    <br>		<!--换行-->
    这里是图片的标题	<!--标题-->
    </center>
</div>

Typora-Logo

多图显示

多图显示但不显示图注

<table frame=void>	<!--使用table标签，且frame=void消除外边框-->
	<tr>		   <!--<tr>一行的内容<\tr>，<td>一个格子的内容<\td>-->
    <td><center><img src="第一张图片的路径"		
                     alt="第一张图片显示不出时显示的文字"
                     height="填数字作为高度"/></center></td>	<!--<center>标签将图片居中-->
    <td><center><img src="第二张图片的路径"
                     alt="第二张图片显示不出时显示的文字"
                     height="高度一致会好看"/></center></td>
    </tr>
</table>

多图显示且显示图注

<div><table frame=void>
	<tr>
        <td><div><center>
        	<img src="第一张图片的路径"
                 alt="Typora-Logo"
                 height="120"/>
        	<br>
        	Typora-Logo1
        </center></div></td>    
     	<td><div><center>
    		<img src="第二张图片的路径"
                 alt="Typora-Logo"
                 height="120"/>
    		<br>
    		Typora-Logo2
        </center></div></td>
	</tr>	
    <tr>	<!--第二行-->
        <td><div><center>
        	<img src="第三张图片的路径"
                 alt="Typora-Logo"
                 height="120"/>
        	<br>
        	Typora-Logo3
        </center></div></td>    
     	<td><div><center>
    		<img src="第四张图片的路径"
                 alt="Typora-Logo"
                 height="120"/>
    		<br>
    		Typora-Logo4
        </center></div></td>
	</tr>
</table></div>