Question 200448 in CSS Question posted in
Some basic documentation can be found here.

Css – Mulitple round buttons with multi-line centered text vertically aligned in a row

I don’t know Flex well enough to get this to work. Basically I have three round buttons with 2-3 lines of centered, vertically aligned text in each http://satisfill.com/wp2023/tester/. How to get them to appear in a centered row? I tried putting this on each button, which worked, but then they were stacked on top of eachother:


display: flex;
flex-direction: column;
justify-content: center;

This was another approach, which works but the text is not vertically aligned.

https://jsfiddle.net/plushdesign/pf7nv9a5/6/


<div class="block">
    <div class="centered">
        <p>vertical on <br>pseudo huehue <br>lol wpizdu</p>
    </div>
    <div class="centered">
        <p>vertical on <br>pseudo huehue <br>lol wpizdu</p>
   </div>
    <div class="centered">
        <p>vertical on <br>pseudo huehue <br>lol wpizdu</p>
    </div>
</div>

.block {
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  font-family:Helvetica;

}
 
.block:before {
  content: ' ';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  text-align: center;
 }
 
.centered {
  display: inline-block;
  vertical-align: middle;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
height:140px;
  width:140px;
  border-radius:50%;
  
}

Thank you!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    so for some reason they don't display inline in context: http://satisfill.com/wp2023/fakingit/

    I used this as the css:

      display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5em;
  height: 300px;
  text-align: center;
  background: transparent;
  border:0px solid #fff;
}
 
.buttonyellow p {
  display: flex;
  align-items: center;
  justify-content: center;
  border: #fff solid 4px;
  background: #fcbd34;
  height: 140px;
  width: 140px;
  border-radius: 50%;
color:#fff;
}

  2. 0

    Apply Flexbox to both the container and the circles

    .block {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5em;
  height: 300px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  font-family: Helvetica, sans-serif;
}
 
.block p {
  display: flex;
  align-items: center;
  justify-content: center;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
  height: 140px;
  width: 140px;
  border-radius: 50%;
}
    <div class="block">
  <p>vertical on <br>pseudo huehue <br>lol wpizdu</p>
  <p>vertical on <br>pseudo huehue <br>lol wpizdu</p>
  <p>vertical on <br>pseudo huehue <br>lol wpizdu</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search