相关疑难解决方法(0)

垂直对齐div中的文本

下面的代码(也可以作为JS Fiddle的演示版)不会将文本放在中间,正如我理想的那样.div即使使用margin-top属性,我也找不到任何方法将文本垂直居中.我怎样才能做到这一点？

<div id="column-content">
    <img src="http://i.stack.imgur.com/12qzO.png">
    <strong>1234</strong>
    yet another text content that should be centered vertically
</div>

Run Code Online (Sandbox Code Playgroud)

#column-content {
    display: inline-block;
    border: 1px solid red;
    position:relative;
}

#column-content strong {
    color: #592102;
    font-size: 18px;
}

img {
    margin-top:-7px;
    vertical-align: middle;        
}

Run Code Online (Sandbox Code Playgroud)

css vertical-alignment

Cyc*_*one

2019 01-30

647
推荐指数

8
解决办法

140万
查看次数

Bootstrap Grid - 具有相同水平/垂直间隙的方形瓷砖

我正在尝试使用 Bootstrap 创建一个具有以下属性的瓷砖网格：

所有瓷砖都应该是正方形
水平和垂直间隙应该相同（即使在不同屏幕宽度上比较相同）
图块应始终居中在屏幕中间（从网站的左边缘到最左边的图块的左边框的距离 = 从网站的右边缘到最右边的图块的右边框的距离）

它应该是这样的：

body{
	   background: #a5b5c5;
	   background:lightblue !important;
    }

    .box{
	   height: 180px;
	   width: 180px;
	   background: #fff;
	   border-radius: 4px;
    }

    .col-lg-2, .col-md-3, .col-xs-6{
	     margin-top: 12px !important;
    }

Run Code Online (Sandbox Code Playgroud)

<div class="container">
	<div class="row">
		
		<div class="col-lg-2 col-md-3 col-xs-6 ">
			<div class="box"></div>
		</div>
		<div class="col-lg-2 col-md-3 col-xs-6 ">
			<div class="box"></div>
		</div>
		<div class="col-lg-2 col-md-3 col-xs-6 ">
			<div class="box"></div>
		</div>
		<div class="col-lg-2 col-md-3 col-xs-6 ">
			<div class="box"></div>
		</div>
		<div class="col-lg-2 col-md-3 col-xs-6 ">
			<div class="box"></div>
		</div>
		<div class="col-lg-2 col-md-3 col-xs-6 …

Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap responsive

Roy*_*ger

2018 04-06

5
推荐指数

1
解决办法

6040
查看次数