html - 在内容居中时左右对齐文本，以及在文本中添加一个中断 - 它只是行不通

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

我正忙着尝试在本地解决您的问题。 我希望我能达到标准。

我修改了你的代码。 我使用的 HTML 是

<div class="border">

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

<p class="text">
    <span class="left-text">How do I Leftalign under h3</span>
    <span class="right-text">How do I rightalign this under the headline?</span>
</p>

<p class="text">
    <span class="left-text">Text is now centered</span>
    <span class="right-text">T</span>
</p>
<p class="text">
    <span class="left-text">Text on first line<i>Text on 2nd line</i></span>
    <span class="right-text">Text is now</span>
</p>
<p class="text">
    <span class="left-text">Text on first line <br><i>Text on 2nd line</i></span>
    <span class="right-text">Centered</span>
</p>
</div>

CSS 也进行了修改，其中一些已被删除。

.border {
border-style: solid;
border-width: thin;
padding-top: 2px;
padding-bottom: 6px;
margin:10px;
}
.solo {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.text {
margin-bottom: 1%;
margin-left: 3%;
margin-right: 3%;
text-align: left;
transition: all 1s ease 0s;
}
.text:hover {
color: #fff;
background: black;
}

.left {
float: left;
width: 50%;
}

.right {
float: right;
width: 50%;
}

.left-text {
display: inline-block;
text-align: left;
vertical-align: middle;
width: 48%;
}

.right-text {
display: inline-block;
text-align: right;
vertical-align: middle;
width: 50%;
}