Text Flows Out of <p> Element With Overflow Hidden And Won't Center

user_13294930 0
Viewed 55

Here's a picture of my current menu

I am trying to make menu items out of the following items, but I'm struggling with making the text inside the paragraph element responsive to its parent. I tried all positioning combinations, as well as every possible combination with percentages and sizing, but nothing worked the way it's supposed to.

I just want to have the text centered inside the circles...

.div-1 {
    display: inline-block;
    margin: 0 15px;
    border: solid 1px blue;
    padding: 20px;
    height: 80px;
    width: 80px;
    border-radius: 50%;
}
<span class="navbar-text">
            <div class="div-1">
               <p>Home</p>
            </div>
            <div class="div-1">
              <p>Services</p>
            </div>
            <div class="div-1">
              <p>Programs</p>
            </div>
        </span>

css html
4 Answers

You can see I used flexbox to achieve what you wanted.

.navbar-text {
  display: flex;
  justify-content: space-around;
}
.div-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px blue;
  padding: 20px;
  height: 80px;
  width: 80px;
  border-radius: 50%;
}
<span class="navbar-text">
  <div class="div-1">
     <p>Home</p>
  </div>
  <div class="div-1">
    <p>Services</p>
  </div>
  <div class="div-1">
    <p>Programs</p>
  </div>
</span>

user_61702330

Here you go using flex box for aligment.

.div-1 {
    display: flex;
    margin: 0 15px;
    border: solid 1px blue;
    padding: 20px;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    align-items:center;
     justify-content: center;
}

.div-1 p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<span class="navbar-text" style="display:flex">
    <div class="div-1">
       <p>Home</p>
    </div>
    <div class="div-1">
      <p>Services</p>
    </div>
    <div class="div-1">
      <p>Programsasdfsdfsdfsdfds</p>
    </div>
</span>

user_51505580 
.div-1 {
    display: flex;
    margin: 0 15px;
    border: solid 1px blue;
    padding: 20px;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    align-items:center;
     justify-content: center;
}

.div-1 p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
user_137337980

I decided to add not-flex approach You can try to use text-align and line-height. But one issue here - it doesn't support multiline. If you want long texts - then use flex.

.div-1 {
    display: inline-block;
    margin: 0 15px;
    border: solid 1px blue;
    padding: 20px;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    text-align: center;
    line-height: 80px;
}

.div-1 > p {
    margin: 0;
}
<span class="navbar-text">
    <div class="div-1">
        <p>Home</p>
    </div>
    <div class="div-1">
        <p>Services</p>
    </div>
    <div class="div-1">
        <p>Programs</p>
    </div>
</span>

user_32637690
Related