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

Question

我想解开这个我想不通的代码之谜。

我有一个页面，我需要在每个 H3 下有一个 "list" 的两列，好吧，那部分我已经弄清楚了。

接下来我希望 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 link: http://jsfiddle.net/x6jkjh9q/

Answer 1

如果我理解正确，你应该使用text-align: left/right;。检查这个 fiddle

编辑

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

Answer 2

也许是这样的？

<div class="border">

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

CSS:

.left, .right {
    float: left;
    width:50%;
}
.left{
    text-align: left;
}

.right{
   text-align: right;
}

Answer 3

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

我修改了你的代码。 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%;
}

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

Left and right align text while content is centered, aswell as adding a break in text - it just won't work

html

css

alignment

breakpoints