Question

我想解决这个代码之谜，我无法弄清楚。

我有一个页面，我需要两个列，每个H3下面都有一个“列表”，好吧，那部分我已经弄明白了。

接下来我想要H3的位置，但是每个H3下面的段落文本应该左右对齐，同时仍然在屏幕的中心位置。这可能吗？

我一直在以不同的方式调整对齐，玩边缘等但我不能让它起作用！

此外，在左侧的两条线上我有附加文本，我想在文本中使用断点，就像在新行上使用第二部分一样。 br 只是不起作用，因为右边看起来都错了，你可以在我的示例中看到下面的JSFiddle代码...有什么建议吗？

对不起，如果我不清楚，我觉得很难解释所以请耐心等待！：）

感谢。

HTML：

<div class="border">

<h3 class="solo">H3<span>Rightside</span></h3>

    <p class="text">How do I Leftalign under h3<span>How do I rightalign this under the headline?</span>
    </p>
    <p class="text">Text is now centered<span>T </span>
    </p>
    <p class="text">Text on first line <i>Text on 2nd line</i><span>Text is now</span>
    </p>
    <p class="text">Text on first line <i>Text on 2nd line</i>  <span>Centered</span>
    </p>
</div>

CSS：

.border {
    border-style: solid;
    border-width: thin;
    padding-top: 2px;
    padding-bottom: 6px;
    margin:10px;
}
.solo {
    display: block;
    text-align: center;
}
.solo span {
    display: block;
    float: right;
    width: 50%;
}
.text {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1%;
    transition: all 1s ease;
    text-align: center;
}
.text:hover {
    color: #fff;
    background: black;
}
.text span {
    display: block;
    float: right;
    width: 50%;
}

JSFiddle链接： http://jsfiddle.net/x6jkjh9q/

Answer 1

如果我理解你想要什么，你应该使用text-align: left/right;。请检查此fiddle

修改

您可以添加宽度小于容器的包装元素 - fiddle - ，或使用padding/margin。

在内容居中的同时左右对齐文本，以及在文本中添加中断 - 它只是不起作用

1 个答案: