水平对齐图片html

时间:2016-03-24 12:10:26

标签: html css wordpress css-float

首先,我不是一个好的编码员。我是一名IT人员,但更多的是一名基础设施人员,但我确实理解有关编码的概念,并且可能对此有一点了解。我正在使用我的网站,并且正在使用wordpress进行构建。在我的主页中,我打算按原样这样做,并决定使用页面构建器并使用文本或HTML(或任何语言)来最大化它。我希望有一个人可以帮助我。我真的很感激。

这是: homepage

那些图像具有onmouseover风格,并且能够做到......事情是我无法横向排列。 :(并且无法包含箭头,因此他们可以向左或向右移动以查看每个图像:(。

我知道当有人帮我解决我想要的概念时,我也可以在图标部分做同样的事情。

1 个答案:

答案 0 :(得分:2)

对于解决方案的具体情况,您的问题非常模糊。

但是,一般来说,当在浏览器中在屏幕上呈现时,事物没有水平对齐的原因是大多数元素(包括流行的<div>)具有display: block;的默认样式,这使得如果父项本身具有相同的样式,它会占用其父项的整个宽度(这是一个不同的讨论级联)。

对此的一般解决方案是定义元素的宽度。并且它们将被放置在同一条线上,以至于元素的宽度允许多个元素出现在同一条线上。

解决此问题的一种方法是以某种方式定义元素宽度。这可以通过应用具有width: 25%;的类来实现。这将允许4个具有相同宽度的元素适合该行。

或者,您也可以将同一行所需元素的display属性值设置为inline-block。这将使这些元素占用其内容的宽度(除非内容没有指定宽度)。这将导致元素沿着水平线流动,就像文本一样(它将在调整其父元素的大小时重新流动),直到不再有包含inline-block显示属性的连续项为止。

由于您的描述也显示了这些行项目的轮播样式导航,因此这些可能不是您正在寻找的完整解决方案。

如果您使用的是Bootstrap框架,则可以使用built-in carousel功能将这些水平对齐的元素包含在轮播的不同“页面”上。使这个解决方案完全响应是另一个挑战。