【WEB开发】

一、前端

NO1.Semantic UI 框架

1.semantic ui image元素的居中
问题描述:在直立平板大小的屏幕下我发现我的网页图片没有居中，如下：

......
<div class="five wide column">
	<a href="#" target="_blank">
		<img src="./static/images/bg.gif" alt="" class="ui rounded image">
	</a>
</div>
......

于是我根据写grid元素的方式尝试在各处加上middle aligned 或者 center aligned 样式，结果发现并没有用处。接着查找了gird中column的用法，在这个过程中有博主写道：

semantic ui 提供容器 container 来快速实现固定宽度居中，使用 container 不需要任何 grid 原文链接

所以尝试使用一个container来包裹这个a标签，结果居中了一点点。最后查阅了这个ui框架的官方文档发现image的居中是使用centered这个样式，代码改成这样就行了：

<div class="five wide column">
	<a href="#" target="_blank">
		<img src="./static/images/bg.gif" alt="" class="ui rounded centered image">
	</a>
</div>