CODEWITHSUNDEEP
htmlcss
hydra3333
hydra3333

Reputation: 167

css and div, how to fix text always vertically positioned at top

I have this HTML and CSS, where stackoverflow kindly gave guidance to create it. However the small text on the right appears vertically positioned at the top of the prior larger font. No matter what I try, it stays that way. Suggestions welcomed.

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
  <div id="a_list">
     <div id="a01" class="highlight_on_hover">
       <div class="lineitem">
          <div class="lineitem_lefttext">left text</div><div class="lineitem_righttext">right text</div>
       </div>
     </div>
  </div>
</body>
</html>

#a_list {
  float: left;
  width: 600px;
  margin: 0px 0px 0px 0px;
  color: black;
  background: white;
}
.highlight_on_hover {
  color:black;
}
.highlight_on_hover:hover {
  color:red;
}
.lineitem {
  display: flex;
  justify-content: space-between;
  vertical-align: center;
}
.lineitem_lefttext {
  /*background-color: green;*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: center;
  font-size: large;
}
.lineitem_lefttext:after {
  content: " ......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................";
  vertical-align: center;
}
.lineitem_righttext {
  flex-shrink: 0;
  font-size: xx-small;
  vertical-align: center;
}

Upvotes: 0

Views: 1612

Answers (4)

Joe
Joe

Reputation: 586

Refer this link maybe its helpful fr yu..

Example link

#a_list {
  float: left;
  width: 600px;
  margin: 0px 0px 0px 0px;
  color: black;
}

.highlight_on_hover {
  color: black;
}

.highlight_on_hover:hover {
  color: red;
}

.lineitem {
  display: flex;
  vertical-align: center;

}

.lineitem_lefttext {
  margin: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: center;
  font-size: large;
}

.lineitem_lefttext:after {
  content: " ";
  vertical-align: center;
}

.lineitem_righttext {
  margin: 10px;
  flex-shrink: 0;
  font-size: small;
  vertical-align: center;
}

Upvotes: 0

Shiz
Shiz

Reputation: 693

your code:

<div class="lineitem_righttext">right text</div>

working solution 1:

<div class="lineitem_righttext"><p>right text</p></div>

explanation:

the vertical-align: center; centers the objects inside it, the right text is only text and can't be read as object, placing it inside object like <p> works.

Upvotes: 0

user12189269
user12189269

Reputation:

When you set .lineitem_righttext with font-size:xx-small; its top-margin and top-padding is also small down so the text is stuck upper side. You can set top-margin and top-padding to take down the text. Or by simply make the font-size:large; to align with the left text.

Upvotes: 2

Mohammad
Mohammad

Reputation: 1577

If you mean why it always stays right and not front of other div then you need to remove justify-content: space-between; in flex div.

space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line.

#a_list {
  float: left;
  width: 600px;
  margin: 0px 0px 0px 0px;
  color: black;
   background-color: #f1f1f1;
}
.highlight_on_hover {
  color:black;
}
.highlight_on_hover:hover {
  color:red;
}
.lineitem {
  display: flex;
  vertical-align: center;
  
}
.lineitem_lefttext {
 margin:10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: center;
  font-size: large;
}
.lineitem_lefttext:after {
  content: " ";
  vertical-align: center;
}
.lineitem_righttext {
 margin:10px;
  flex-shrink: 0;
  font-size: xx-small;
  vertical-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
  <div id="a_list">
     <div id="a01" class="highlight_on_hover">
       <div class="lineitem">
          <div class="lineitem_lefttext">left text</div><div class="lineitem_righttext">right text</div>
       </div>
     </div>
  </div>
</body>
</html>

Upvotes: 0

Related Questions