How can I get 3 lines of text on the same line and still be able to position them?

Question

Making an about page I am trying to get 3 lines of text, titles to be on the same line as each other, right below a css circle with a background-image. Below that I have some text that needs to be under the respective nickname. I have no clue how to get the text to be equally spaced out and in the center. Margin seems to not be working. Let me know how to do this, if it is even possible. I have been looking for answers for hours now, both on this site and multiple others but have not found one. So I guess my question is: How can I get 3 lines of text on the same line and still be able to position them?`

Here is my code. Keep in mind I am using the skeleton responsive grid system.

#importantpeople {
  text-align: center;
}
#manager-1 {
  font-weight: 500;
  text-align: left;
  margin-left: -2px;
}
#manager-2 {
  font-weight: 500;
  text-align: center;
}
#manager-3 {
  font-weight: 500;
  text-align: right;
  margin-right: 10px;
}

<div class="container">
  <div class="row" id="importantpeople">
    <h4 id="managers-head">Our Managers</h4>
    <div class="one-third.column" id="screamer">
    </div>
    <div class="one-third.column" id="kinzu">
    </div>
    <div class="one-third.column" id="swezii">
    </div>
    <h5 id="manager-1">Screamer</h5>
    <h5 id="manager-2">KINZU</h5>
    <h5 id="manager-3">Swezii</h5>
    <p>Just a guy chilling on his computer creating works of art for people</p>
    <p>I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
    <p>I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
  </div>
</div>

Are you using Bootstrap? If so, please update the tags on your question. — j08691, May 21 '15 at 19:07
Because maybe we don't have the whole picture, as i've already mention in the solution I've provided earlier. Try drawing some sort of a layout in photoshop or any other graphic tool, specify exactly what you need, then you will definitely get your answer. Your question is rather vague. — designarti, May 22 '15 at 18:36
Well I am a kid so that may be why I am vague. I'm not to good in L.A class grade 8. Next time I will for sure take more time to explain what I need. — Micah Friesen, May 22 '15 at 19:45

score 1 · Answer 1 · edited May 23 '17 at 11:43

you have to use display inline if you want headings and paragraph to be on the same line. But I think i have an idea of what problem you are having To do that way: you need to put each and its description in the same div

<div id="manager-1div" class="managers">
     <h5 id="manager-1">Screamer</h5>
     <p>Just a guy chilling on his computer creating works of art for people</p></div>
<div id="manager-2div" class="managers">
   <h5 id="manager-2" class="center-us-all">KINZU</h5>
   <p class="center-us-all">I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
</div>
<div id="manager-3div" class="managers">
    <h5 id="manager-3" class="center-us-all">Swezii</h5>  
    <p class="center-us-all">I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
</div>

Css

.managers{
   display: inline-block;
}
.center-us-all{
   text-align: center;
}

you can make them same height using this question: Side by side divs with same height

I can't align the text when using this. How do I align because text-align is not working. I originally had this display:inline-block; But I couldn't align it. — Micah Friesen, May 21 '15 at 20:12
edited my answer, I added a text-align center us all class that will center them. wrote the css underneath — Coding Enthusiast, May 21 '15 at 20:28
Text-Align does not how on the h5s. my code is exactly like yours. — Micah Friesen, May 21 '15 at 22:59

score 1 · Accepted Answer · answered May 21 '15 at 19:03

One way is to float the first item left and the last item right. Note then you will need to clear the floats on the paragraph.

#importantpeople {
  text-align: center;
}
#manager-1 {
  font-weight: 500;
  text-align: left;
  margin-left: -2px;
  float: left;
}
#manager-2 {
  font-weight: 500;
  text-align: center;
}
#manager-3 {
  font-weight: 500;
  text-align: right;
  margin-right: 10px;
  float: right;
}
p {
  clear: both;
}
h5 {
  margin: 0;
}

<div class="container">
  <div class="row" id="importantpeople">
    <h4 id="managers-head">Our Managers</h4>
    <div class="one-third.column" id="screamer">
    </div>
    <div class="one-third.column" id="kinzu">
    </div>
    <div class="one-third.column" id="swezii">
    </div>
    <h5 id="manager-1">Screamer</h5>
    <h5 id="manager-3">Swezii</h5>
    <h5 id="manager-2">KINZU</h5>
    <p>Just a guy chilling on his computer creating works of art for people</p>
    <p>I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
    <p>I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
  </div>
</div>

The demo above isn't working for you? What browser are you using? — j08691, May 21 '15 at 20:47
Works fine. I noticed you're telling everyone it's not working. Perhaps the issue isn't with our solutions? — j08691, May 21 '15 at 23:43
I'm new to this web development thing, maybe I am having syntax errors? The float solution seems to work after playing around with the margin. My problem was that the margin was making the float not be ddirecty on the left or right. Thanks for the help, this fixed my problem. — Micah Friesen, May 22 '15 at 19:48

isherwood · Answer 3 · 2015-05-21T19:07:34.620

1

I see Bootstrap-like classes. Why not use the grid that's available to you? I'm guessing you're not actually using Bootstrap due to .one-third.column classes, but here's how it should be done in whatever grid you're using.

<div class="row">
    <div class="col-xs-4 text-left">
        <div class="one-third.column" id="screamer"></div>
         <h5 id="manager-1">Screamer</h5>

    </div>
    <div class="col-xs-4 text-center">
        <div class="one-third.column" id="kinzu"></div>
         <h5 id="manager-2">KINZU</h5>

    </div>
    <div class="col-xs-4 text-right">
        <div class="one-third.column" id="swezii"></div>
         <h5 id="manager-3">Swezii</h5>

    </div>
</div>

Demo

edited May 21 '15 at 19:07

answered May 21 '15 at 19:03

isherwood

58,414
16
114
157

I know he said he's using a skeleton responsive grid system, but I wasn't sure if we should assume Bootstrap. – j08691 May 21 '15 at 19:04
I don't understand, What is col-xs-4 text-left? – Micah Friesen May 21 '15 at 20:06
`col-xs-4` is Bootstrap's equivalent of your `one-third`. `text-center` is what you'd expect--it applies text centering to its content. – isherwood May 21 '15 at 20:10
text-center is not part of the gs that I am using. Now what? – Micah Friesen May 21 '15 at 23:01
You seem to have a grasp on the basics of CSS. So write some. :-) `.text-center {text-align: center;}` – isherwood May 22 '15 at 00:29

Dmitriy · Answer 4 · 2015-05-21T19:14:52.860

use display: inline-block;

#importantpeople {
  text-align: center;
}
.inline-block{
    display: inline-block;  
    width: 32%
}

#manager-1 {
  font-weight: 500;
  text-align: left;
  margin-left: -2px;
}
#manager-2 {
  font-weight: 500;
  text-align: center;
}
#manager-3 {
  font-weight: 500;
  text-align: right;
  margin-right: 10px;
}

<div class="container">
  <div class="row" id="importantpeople">
    <h4 id="managers-head">Our Managers</h4>
    <div class="one-third.column" id="screamer">
    </div>
    <div class="one-third.column" id="kinzu">
    </div>
    <div class="one-third.column" id="swezii">
    </div>
    <h5 id="manager-1" class="inline-block">Screamer</h5>
    <h5 id="manager-2" class="inline-block">KINZU</h5>
    <h5 id="manager-3" class="inline-block">Swezii</h5>
    <p>Just a guy chilling on his computer creating works of art for people</p>
    <p>I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
    <p>I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
  </div>
</div>

score 1 · Answer 5 · answered May 21 '15 at 19:12

I'm wrapping everything in some sort of a table. You can work it out based on ID's after, if you want to set margins or align the text differently within the table-cells provided. I hope this is what you were looking for, although I don't think I've clearly got the whole image of your issue. If you want to have the same thing with the paragraphs below, just add another table-row class to wrap the p's.

.table {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
  width: 100%;
}
.table-row .column,
.table-row h5 {
  display: table-cell;
  text-align: center;
}

<div class="container">
  <div class="row" id="importantpeople">
    <h4 id="managers-head">Our Managers</h4>
    <div class="table">
      <div class="table-row">
        <div class="one-third column" id="screamer">Some image</div>
        <div class="one-third column" id="kinzu">Other image</div>
        <div class="one-third column" id="swezii">Third image</div>
      </div>
      <div class="table-row">
        <h5 id="manager-1">Screamer</h5>
        <h5 id="manager-2">KINZU</h5>
        <h5 id="manager-3">Swezii</h5>
      </div>
    </div>
    <p>Just a guy chilling on his computer creating works of art for people</p>
    <p>I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
    <p>I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
  </div>
</div>

How can I get 3 lines of text on the same line and still be able to position them?

5 Answers5

Css