水平对齐图片html

Question

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

这是： homepage

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

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

Answer 1

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

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

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

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

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

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

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