将行 div 内的 3 div 与文本居中对齐
Align 3 divs within row div with text centered
与 How to align 3 divs (left/center/right) inside another div? 类似,我试图在父 div 中对齐三个 div。更复杂的是每个 div 包含一个图像、文本和一个 link。我希望这些对齐 link 所以:
[[LEFT-IMG] [CENTER-IMG] [RIGHT-IMG]]
text text text
link link link
然而,我能得到的最接近的是:
[[LEFT-IMG] [CENTER-IMG] [RIGHT-IMG]]
text text text
link link link
文本和 links 镜像对齐图像。
这是我的 HTML:
<div class="row">
<div class="col-4 left">
<img src="http://placehold.it/250x150" alt="Thing 1">
<p>THING 1</p>
<a href="somedomain.com">somedomain.com</a>
</div>
<div class="col-4 center">
<img src="http://placehold.it/250x150" alt="Thing 2">
<p>THING 2</p>
<a href="somedomain.com">somedomain.com</a>
</div>
<div class="col-4 right">
<img src="http://placehold.it/250x150" alt="Thing 3">
<p>THING 3</p>
<a href="somedomain.com">somedomain.com</a>
</div>
</div>
我的CSS:
.row {
margin: 0 auto;
max-width: 1000px;
width: 100%;
display: flex;
right: 0;
text-align: center;
flex-wrap: wrap;
}
.left {
display: inline-block;
text-align: left;
}
.right {
display: inline-block;
text-align: right;
}
.center {
display: inline-block;
margin: 0 auto;
}
.col-4 {
width: 33.33%;
}
请注意,这些都在网格 div 内,具有以下 CSS:
.grid {
margin: 0 auto;
max-width: 1000px;
display: flex;
flex-wrap: wrap;
}
我感觉我的结构存在根本性的错误,但我不确定是什么。这方面很新。
有什么想法吗?
更新:这是一个显示当前进度的 JSFiddle。 http://jsfiddle.net/ljhennessy/j8jrn719/
这里的关键是我希望左右图像一直对齐到两边的红色边框。
只需删除 col-4 class.
旁边的 class
它看起来像这样:
<div class="row">
<div class="col-4">
<img src="http://placehold.it/250x150" alt="Thing 1">
<p>PROJECT 1</p>
<a href="somedomain.com">somedomain.com</a>
</div>
<div class="col-4">
<img src="http://placehold.it/250x150" alt="Thing 2">
<p>THING 2</p>
<a href="somedomain.com">somedomain.com</a>
</div>
<div class="col-4">
<img src="http://placehold.it/250x150" alt="Thing 3">
<p>THING 3</p>
<a href="somedomain.com">somedomain.com</a>
</div>
</div>
要使您的图像适合该列,只需将此代码添加到您的 css:
img {
width: 100%;
}
希望对您有所帮助。
只需将 text-align 属性 更改为 .left 和 .right 居中
与 How to align 3 divs (left/center/right) inside another div? 类似,我试图在父 div 中对齐三个 div。更复杂的是每个 div 包含一个图像、文本和一个 link。我希望这些对齐 link 所以:
[[LEFT-IMG] [CENTER-IMG] [RIGHT-IMG]]
text text text
link link link
然而,我能得到的最接近的是:
[[LEFT-IMG] [CENTER-IMG] [RIGHT-IMG]]
text text text
link link link
文本和 links 镜像对齐图像。
这是我的 HTML:
<div class="row">
<div class="col-4 left">
<img src="http://placehold.it/250x150" alt="Thing 1">
<p>THING 1</p>
<a href="somedomain.com">somedomain.com</a>
</div>
<div class="col-4 center">
<img src="http://placehold.it/250x150" alt="Thing 2">
<p>THING 2</p>
<a href="somedomain.com">somedomain.com</a>
</div>
<div class="col-4 right">
<img src="http://placehold.it/250x150" alt="Thing 3">
<p>THING 3</p>
<a href="somedomain.com">somedomain.com</a>
</div>
</div>
我的CSS:
.row {
margin: 0 auto;
max-width: 1000px;
width: 100%;
display: flex;
right: 0;
text-align: center;
flex-wrap: wrap;
}
.left {
display: inline-block;
text-align: left;
}
.right {
display: inline-block;
text-align: right;
}
.center {
display: inline-block;
margin: 0 auto;
}
.col-4 {
width: 33.33%;
}
请注意,这些都在网格 div 内,具有以下 CSS:
.grid {
margin: 0 auto;
max-width: 1000px;
display: flex;
flex-wrap: wrap;
}
我感觉我的结构存在根本性的错误,但我不确定是什么。这方面很新。
有什么想法吗?
更新:这是一个显示当前进度的 JSFiddle。 http://jsfiddle.net/ljhennessy/j8jrn719/
这里的关键是我希望左右图像一直对齐到两边的红色边框。
只需删除 col-4 class.
旁边的 class它看起来像这样:
<div class="row">
<div class="col-4">
<img src="http://placehold.it/250x150" alt="Thing 1">
<p>PROJECT 1</p>
<a href="somedomain.com">somedomain.com</a>
</div>
<div class="col-4">
<img src="http://placehold.it/250x150" alt="Thing 2">
<p>THING 2</p>
<a href="somedomain.com">somedomain.com</a>
</div>
<div class="col-4">
<img src="http://placehold.it/250x150" alt="Thing 3">
<p>THING 3</p>
<a href="somedomain.com">somedomain.com</a>
</div>
</div>
要使您的图像适合该列,只需将此代码添加到您的 css:
img {
width: 100%;
}
希望对您有所帮助。
只需将 text-align 属性 更改为 .left 和 .right 居中