Question

我有这个页面：

我在下面放了一张照片，以便更好地了解我想要做的事情。

enter image description here

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

这是代码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;
}

在我们进行此更改后，元素看起来像。

enter image description here

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

提前致谢！

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％响应。

Sample design image.

要实现这一点，只需使用此CSS替换这些类下的现有CSS。我想说明你的HTML标记是极端的意大利面条。此外，不要使用带有内联块的浮点数，这没有任何意义。对所有内容使用内联块，并且只在需要将东西放到右侧（例如导航栏）时使用浮动，或者当然是它的原始用途。

.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 { 文本对齐：中心; } .text2 p { 文本对齐：中心; }

滑块的描述部分需要位于中心，它位于＆＃34; text2＆＃34;类。所以我们正在调整我的中心位置。

我希望这对你有用。

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;
}

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

4 个答案: