2018-4-25 自定义 css 样式调整块级图片标题显示位置.md

title	tags	createDate	updateDate	grammar_cjkRuby	slug
2018-4-25 自定义 css 样式调整块级图片标题显示位置	教程, 样式,小书匠	2018-04-25	2018-04-25	true	/modify_image_title_by_custom_css

[toc!?direction=lr&root=自定义css]

概述

从小书匠 5.7.6 版本开始，小书匠对块级图片生成的 html 结构进行了调整。 将原来的 story_image_caption 放到了 story_image 标签内。通过该修改后，用户可以通过自定义 css 样式时，比较方便的进行标题位置的调整。

<div class="story_image_container story_block_image">
	<div class="story_image">
		<img src="./images/1234.jpg" alt="enter description here" title="enter description here" name="images/1524643761548.jpg">
	</div>
	<br>
	<div class="story_image_caption ">enter description here</div>
</div>

<div class="story_image_container story_block_image">
	<div class="story_image">
		<img src="./images/1234.jpg" alt="enter description here" title="enter description here" name="images/1524643761548.jpg">
		<br>
		<div class="story_image_caption ">enter description here</div>
	</div>
</div>

自定义 css 样式调整标题位置

几个调整位置的示例

通过自定义 css 样式调整图片标题位置的方式不仅限于下面几种示例方法。如果你对 html, css 比较熟悉，也可以通过 display:flex, display:table 等其他方式来实现，如果使用 display:flex ,也可以不用升级到小书匠 5.7.6 版本，就能实现位置的调整。

将标题置于图片外的上方居中

.story_image {
    padding-top: 40px;
}
.story_image_caption {
    position: absolute;
    top: 0;
    right: 0;
	left: 0;
	border-bottom: 0;
    text-decoration-style: solid;
    text-decoration-skip: ink;
    text-decoration-line: underline;
}

将标题置于图片外的右上方

.story_image {
    padding-top: 40px;
}
.story_image_caption {
    position: absolute;
    top: 0;
    right: 0;
	border-bottom: 0;
    text-decoration-style: solid;
    text-decoration-skip: ink;
    text-decoration-line: underline;
}

将标题置于图片外的左上方

.story_image {
    padding-top: 40px;
}
.story_image_caption {
    position: absolute;
    top: 0;
    left: 0;
	border-bottom: 0;
    text-decoration-style: solid;
    text-decoration-skip: ink;
    text-decoration-line: underline;
}

将标题置于图片外的左下方

.story_image_caption{
float: left;
}

将标题置于图片外的右下方

.story_image_caption{
float: right;
}

将标题置于图片内的上方居中

.story_image_caption {
    position: absolute;
    top: 0;
    right: 0;
	left: 0;
	border-bottom: 0;
	color: #fff;
    text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000;
}

将标题置于图片内的右上方

.story_image_caption {
    position: absolute;
    top: 0;
    right: 0;
	border-bottom: 0;
	color: #fff;
    text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000;
}

将标题置于图片内的左上方

.story_image_caption {
    position: absolute;
    top: 0;
    left: 0;
	border-bottom: 0;
	color: #fff;
    text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000;
}

将标题置于图片内的左下方

.story_image_caption {
    position: absolute;
    bottom: 0;
    left: 0;
	border-bottom: 0;
	color: #fff;
    text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000;
}

将标题置于图片内的右下方

.story_image_caption {
    position: absolute;
    bottom: 0;
    right: 0;
	border-bottom: 0;
	color: #fff;
    text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000;
}

将标题置于图片内的下方居中

.story_image_caption {
    position: absolute;
    bottom: 0;
    left: 0;
	right: 0;
	border-bottom: 0;
	color: #fff;
    text-shadow: -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000;
}