如何将这些元素与中心对齐？

Question

我有这个页面：

http://paul.dac-proiect.ro/

我在下面放一张照片，以更好地了解我想做什么。

我想将按钮和文本排列到中间，如上图所示

这是代码HTML：

<div class="text">
    <div class="left" style="float:left;display:inline-block;">
        <div class="inline">
            <img class="slideshow-prev" src="/wp-content/themes/wpbootstrap/images/butoane-1.png" alt="photo3">
        </div>
        <div class="inline">
            <img class="slideshow-next" src="/wp-content/themes/wpbootstrap/images/butoane-4.png" alt="photo3">
        </div>
        <p style="display: block;"></p>
    </div>
    <div class="text2">
        <p style="display:block;">TEXT PENTRU PRIMA IMAGINE</p>
        <p>TEXT PENTRU A DOUA IMAGINE</p>
        <p>TEXT PENTRU A TREIA IMAGINE</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p></p>
    </div>
    <p></p>
</div>

我希望这条线反应灵敏，我不想使用固定宽度。

我尝试了以下方法以使中心对齐，但认为这不公平。

.text {
    width:300px; //Here is a fixed width and I do not want so
    margin:0 auto;
}

进行更改后，元素看起来像。

您能帮我解决这个问题吗？

提前致谢！

Answer 1

试试这个解决方案：

.text {
    text-align: center;
    background-color: white;
}

.left {
    //remove float:left;
    display: inline-block;
}

.text2 {
    vertical-align: top;
    display: inline-block;
}

.contact {
    text-align: center;
}

如果您不希望联系信息居中对齐，只需删除最后一个选择器即可。

Answer 2

我为您共同创建了一个不同的解决方案。 我是前端设计师，对您的想法采取了不同的方法。 我认为它在网站上看起来更干净，而且响应速度为100％。

样本设计图像。

为此，只需使用此CSS替换这些类下的现有CSS。 我想说明一下，您的HTML标记是极好的意大利面。 另外，不要将浮点数与inline-block一起使用，这没有任何意义。 对所有内容都使用内联块，仅在需要将内容浮动到右侧（例如导航栏）时使用浮动，或者这当然是其原始预期用途。

.text {
  display: block;
  width: 100%;
  float: none;
  text-align: center;
  background-color: #fff;
  padding: 10px 0 4px;
  border-bottom: 1px solid #F0F0F0;
}

.inline{
display: inline-block;
cursor: pointer;
}

.contact {
  padding-top: 24px;
}

在下面的这一行HTML上， 删除内联CSS float和display:inline-block 。

<div class="left" style="float:left;display:inline-block;">

Answer 3

.text2 {text-align：center; } .text2 p {text-align：center; }

滑块的描述部分需要居中，并且在“ text2”类中。 所以我们将i对准中心。

希望这对您有用。

Answer 4

我对您的HTML做了一些修改，从left类中删除了内联样式

HTML

<div class="text">
    <div class="left">
        <div class="inline">
            <img class="slideshow-prev" src="/wp-content/themes/wpbootstrap/images/butoane-1.png" alt="photo3">
        </div>
        <div class="inline">
            <img class="slideshow-next" src="/wp-content/themes/wpbootstrap/images/butoane-4.png" alt="photo3">
        </div>
        <p style="display: block;"></p>
    </div>
    <div class="text2">
        <p style="display:block;">TEXT PENTRU PRIMA IMAGINE</p>
        <p>TEXT PENTRU A DOUA IMAGINE</p>
        <p>TEXT PENTRU A TREIA IMAGINE</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p></p>
    </div>
    <p></p>
</div>

CSS

.text {
  text-align:center;
}
.text div {
    display: inline-block;
}