Advokaten Advokaten - 7 months ago 10
HTML Question

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

I would like to solve this code mystery which I cannot figure out.

I have a page where I need two columns with a "list" under each H3, okay that part I got figured out.

Next I want the H3's to be where they are but the paragraph text under each H3 should be aligned left on the left and right on the right while still being centered on the screen so to speak. Is this possible?

I've been messing around with aligning in different ways, playing around with margins etc but I can't get it to work!

Additionally, on two of the lefthandside lines I have additional text and I want to use a breakpoint in the text, as in having the 2nd part of the line on a new line. br just won't work as the rightside looks all wrong as you can see in my example JSFiddle code below... Any suggestions?

Sorry if I'm being unclear, I find it quite hard to explain so bear with me! :)

Thanks.

The 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>


The 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

I was busy trying to solve you issue locally. I hope I am up to the mark.

I modified your code. HTML I used is

<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 also modified and some were removed.

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