How to make a text to stay exactly some px above a center text?

Question

I have an HTML structure like below, where I want the summary to show up right in the center (vertically and horizontally). And the 'just-in-tags' to be exactly 20px above (margin) the summary.

<div class="article-right aligner">
    <div class="just-in-tags">
        <span class="article-label tags tags--primary">Latest Best of the Web</span> 
    </div>

    <div class="summary">
        <h2 class="trending-header-text">
        <a href="google.com">Hello World Hello World Hello World</a>
      </h2>
    </div>
</div>

I tried to do like shown in this codepen:

http://codepen.io/hellouniverse/pen/LbJoYY

The CSS I am trying is:

%aligner {
    align-items: center;
    display: flex;
    justify-content: center;
}

.tags {
    text-align: center;
    margin-bottm: 20px;
}

.article-right {
    width: 860px;
    height: 320px;
    background-color: grey;
    @extend %aligner;
    flex-direction: column;
}

However, everything is centered for me. I want the text of summary to be centered and the "Latest Best of the Web" to be exactly 20px above text of summary such that the the summary text still stays in the center vertically.

I am stuck. Any idea how to solve this issue?

Just put the centered text in a div, center the div. Then put the other text in that div and specify the px location, or margin from the other text. — Ashwin Gupta, Dec 13 '16 at 03:41

score 0 · Answer 1 · answered Dec 13 '16 at 03:47

Use this code instead:

.aligner {
 align-items: center;
 display: flex;
 justify-content: center;
}

.summary {
 text-align: center;
}

.tags { 
 margin-bottm: 20px;
}

.article-right {
 width: 860px;
 height: 320px;
 background-color: grey;
 @extend %aligner;
 flex-direction: column;
}

<div class="article-right aligner">
 <div class="summary">
  <span class="article-label tags tags--primary">Latest Best of the Web</span> 
  <h2 class="trending-header-text">
        <a href="google.com">Hello World Hello World Hello World</a>
      </h2>
 </div>
</div>

BTW: you had a typo in that codepen. The aligner had % instead of ..

oh right sorry I mostly work with LESS @Dilbert, the code is working for you? — Yaser, Dec 13 '16 at 04:11

score 0 · Answer 2 · 2016-12-13T04:03:40.203

0

You can get the latest of the web text in center by uncommenting the text-align:center in .tags class (if you want that..)

.article-right {
    width: 860px;
    height: 320px;
    background-color: grey;
  position:relative;
}
.summary{
 margin:0;
 padding:0;
 width:100%;
 position:absolute;
 bottom:50%;
}
.tags {
  margin:0;
  padding:0;
  /*text-align: center;*/
  margin-bottom: 20px;
}
.trending-header-text{
 text-align:center;
 margin:0;
 padding:0;
    font:size:30px;
    margin-bottom:-15px;
}

  <div class="article-right aligner">
        <div class="summary">
          <p class="article-label tags tags--primary">Latest Best of the Web</p>
          <h2 class="trending-header-text">
            <a href="google.com" >Hello World Hello World Hello World</a>
          </h2>
        </div>
    </div>

edited Dec 13 '16 at 04:03

answered Dec 13 '16 at 03:52

"I want the text of summary to be centered and the "Latest Best of the Web" to be exactly 20px above text of summary such that the the summary text still stays in the center vertically.". That is it is not about making Latest Best Of the Web not horizantally center. It is about keeping the Hello WOrld vertically center and making the other text 20px above it. – Dec 13 '16 at 03:55
that is in my code. I altered html you gave a little bit – Dec 13 '16 at 03:56
sorry about that. but it was easier that way – Dec 13 '16 at 03:57
Hello world is centered in middle veritically and horizontally and "Latest ..." is exactly 20px above it – Dec 13 '16 at 03:58
Added your soln to a codepen http://codepen.io/hellouniverse/pen/ZBMNBw . See hello world is not center vertically anymore since Latest Best of the Web has pulled the text above by 20px – Dec 13 '16 at 03:59
Hello worls is at center vertically – Dec 13 '16 at 04:00
If you remove the "Latest .." text it would be perfectly in vertical. – Dec 13 '16 at 04:01
Yes, that is the problem. We can not remove the text. I want to vertically center the Hello World. ANd then ensure the latest text is above it without moving the position of the Hello WOrld – Dec 13 '16 at 04:02
Sorry for earlier, I didn't figure out my mistake. – Dec 13 '16 at 04:05

score 0 · Answer 3 · answered Dec 13 '16 at 03:54

.aligner {
 align-items: center;
 display: flex;
 justify-content: center;
}

.summary {
 text-align:center;
}

.tags {
 margin-bottm: 20px;
}

.article-right {
 width: 860px;
 height: 320px;
 background-color: grey;
 @extend .aligner;
 flex-direction: column;
 text-align: center;
}

How to make a text to stay exactly some px above a center text?

3 Answers3