如何将容器放在列的中心?

查科尔

在此处输入图片说明

我不知道如何将图像容器居中放置在列中。同样由于某种原因,即使所有设置都完全正确,中间的图片也不会显示,这是不是有些原因呢?

另外,无论出于何种原因,使用谷歌浏览器时我的列均无法正确格式化。我以为-webkit-应该解决此问题?

.columns {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	column-gap: 20px;
}

.columns-format {
	display: inline-block;
	width: auto;
}

.image-container {
	display: inline-block;
	border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin: auto;
}

.image-container hover {
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
<div class="columns">
<div class="columns-format">
<h4>Professionals</h4>
<p>As Northeast Ohio Landscapers, Landscaping Company has been caring for customers and their properties throughout Cuyahoga County since 1981.</p>

<p>Our core values:
<ul>
	<li>Bring a positive attitude with you each and every day</li>
	<li>Work hard, pitch in, be helpful and productive</li>
	<li>Be fair and respectful with all people in all encounters</li>
</ul>
</p>
<div class="image-container">
	<a target="_blank" href="images/stairwell.jpg">
		<img src="images/stairwell.jpg" width="250px" height="200px">
		</a>
</div>
</div>

<div class="columns-format">
<h4>Services</h4>
<p>Whether you are new to Cuyahoga County, switching landscape service providers, or need to add a service to your existing account, Landscaping Company makes it easy for you.</p>
<p>Experienced in every facet of the landscape industry, we fulfil our one goal - total care philosophy by meeting your every need in the following areas:</p>
<p>Residential Landscape</p>
<p>Maintenance Landscape</p>
<p>Design/Installation</p>
<p>Plant Health Care</p>
<div class="image-container">
	<a target="_blank" href="images/flowers.jpg">
		<img src="images/flowers.jpg" width="250px" height="200px">
		</a>
</div>
</div>

<div class="columns-format">
<h4>Mission</h4>
<p>When it comes to Residential Landscape Maintenance in Northeast Ohio, we have a pretty simple mission.</p>
<p>Our mission is to unite people in positive relationships to improve lives.</p>
<p>This includes not only our great customers but also our fantastic employees and vendors that we work with each and every day.</p>
<p>If we are not improving your life then we are not living up to our mission.</p>
</div>
<div class="image-container">
	<a target="_blank" href="images/lighting.jpg">
		<img src="images/lighting.jpg" width="250px" height="200px">
		</a>
</div>
</div>

一个儿子

我可以建议您使用flexbox代替columns

columns旨在使文本和图像在一定数量的列上动态分布,并且您的示例看起来更多为3列,其内容应包含在每列中,而columns事实并非如此。

要使图像/列不重叠,请提供columns-format最小宽度(在下面的示例中),将图像大小设置为百分比,包装列等。

.columns {
  display: flex;
  justify-content: space-between;
}
.columns-format {
  display: inline-block;
  width: 30%;
  min-width: 300px;
}
.image-container {
  text-align: center;
}
.image-container a {
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  transition: box-shadow 0.3s;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.image-container a:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<div class="columns">
  <div class="columns-format">
    <h4>Professionals</h4>
    <p>As Northeast Ohio Landscapers, Landscaping Company has been caring for customers and their properties throughout Cuyahoga County since 1981.</p>

    <p>Our core values:</p>
    <ul>
      <li>Bring a positive attitude with you each and every day</li>
      <li>Work hard, pitch in, be helpful and productive</li>
      <li>Be fair and respectful with all people in all encounters</li>
    </ul>
    <div class="image-container">
      <a target="_blank" href="images/stairwell.jpg">
        <img src="images/stairwell.jpg" width="250px" height="200px">
      </a>
    </div>
  </div>

  <div class="columns-format">
    <h4>Services</h4>
    <p>Whether you are new to Cuyahoga County, switching landscape service providers, or need to add a service to your existing account, Landscaping Company makes it easy for you.</p>
    <p>Experienced in every facet of the landscape industry, we fulfil our one goal - total care philosophy by meeting your every need in the following areas:</p>
    <p>Residential Landscape</p>
    <p>Maintenance Landscape</p>
    <p>Design/Installation</p>
    <p>Plant Health Care</p>
    <div class="image-container">
      <a target="_blank" href="images/flowers.jpg">
        <img src="images/flowers.jpg" width="250px" height="200px">
      </a>
    </div>
  </div>

  <div class="columns-format">
    <h4>Mission</h4>
    <p>When it comes to Residential Landscape Maintenance in Northeast Ohio, we have a pretty simple mission.</p>
    <p>Our mission is to unite people in positive relationships to improve lives.</p>
    <p>This includes not only our great customers but also our fantastic employees and vendors that we work with each and every day.</p>
    <p>If we are not improving your life then we are not living up to our mission.</p>
    <div class="image-container">
      <a target="_blank" href="images/lighting.jpg">
        <img src="images/lighting.jpg" width="250px" height="200px">
      </a>
    </div>
  </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将行和列放在节的中心

来自分类Dev

如何将图像放在视图的中心?

来自分类Dev

如何将 ap 放在 div 的中心?

来自分类Dev

如何将div放在容器内?

来自分类Dev

如何将文字放在内部div的中心?

来自分类Dev

如何将这些列表项放在页面底部的中心?

来自分类Dev

如何将段落中心放在导航栏下方

来自分类Dev

如何将这些列表项放在页面底部的中心?

来自分类Dev

如何将文字放在特定字符位置的中心?

来自分类Dev

如何将这 3 个按钮放在底部的中心?

来自分类Dev

如何将容器放在标头顶部

来自分类Dev

如何将列内容放在底部?

来自分类Dev

如何将项目与flex容器的起点和中心对齐?

来自分类Dev

如何将浮动div移动到容器的中心

来自分类Dev

将div放在Bootstrap列的中心

来自分类Dev

将div放在Bootstrap列的中心

来自分类Dev

使用 CSS 将微调器放在图像容器的中心

来自分类Dev

如何将一段文字放在HTML,CSS或JavaScript的特定单词的中心?

来自分类Dev

如何将主标题放在整个绘图窗口的水平中心?

来自分类Dev

如何将两个未知尺寸的项目放在一个盒子的中心

来自分类Dev

如何将表格放在窗口中心(设置表格位置)

来自分类Dev

如何将主标题放在整个绘图窗口的水平中心?

来自分类Dev

如何将下拉列表和表格元素放在页面中心?

来自分类Dev

在CSS中使用border-box时,如何将文本放在box的中心?

来自分类Dev

如何将按钮A放在按钮B下方,使A的左侧与B的中心垂直对齐?

来自分类Dev

如何将imageview放在自定义对话框的中心顶部?

来自分类Dev

如何使用CSS将徽标放在中心

来自分类Dev

如何将数字从左到右放在一列中?

来自分类Dev

如何将日期放在 R 中输出的顶列

Related 相关文章

  1. 1

    如何将行和列放在节的中心

  2. 2

    如何将图像放在视图的中心?

  3. 3

    如何将 ap 放在 div 的中心?

  4. 4

    如何将div放在容器内?

  5. 5

    如何将文字放在内部div的中心?

  6. 6

    如何将这些列表项放在页面底部的中心?

  7. 7

    如何将段落中心放在导航栏下方

  8. 8

    如何将这些列表项放在页面底部的中心?

  9. 9

    如何将文字放在特定字符位置的中心?

  10. 10

    如何将这 3 个按钮放在底部的中心?

  11. 11

    如何将容器放在标头顶部

  12. 12

    如何将列内容放在底部?

  13. 13

    如何将项目与flex容器的起点和中心对齐?

  14. 14

    如何将浮动div移动到容器的中心

  15. 15

    将div放在Bootstrap列的中心

  16. 16

    将div放在Bootstrap列的中心

  17. 17

    使用 CSS 将微调器放在图像容器的中心

  18. 18

    如何将一段文字放在HTML,CSS或JavaScript的特定单词的中心?

  19. 19

    如何将主标题放在整个绘图窗口的水平中心?

  20. 20

    如何将两个未知尺寸的项目放在一个盒子的中心

  21. 21

    如何将表格放在窗口中心(设置表格位置)

  22. 22

    如何将主标题放在整个绘图窗口的水平中心?

  23. 23

    如何将下拉列表和表格元素放在页面中心?

  24. 24

    在CSS中使用border-box时,如何将文本放在box的中心?

  25. 25

    如何将按钮A放在按钮B下方,使A的左侧与B的中心垂直对齐?

  26. 26

    如何将imageview放在自定义对话框的中心顶部?

  27. 27

    如何使用CSS将徽标放在中心

  28. 28

    如何将数字从左到右放在一列中?

  29. 29

    如何将日期放在 R 中输出的顶列

热门标签

归档