Align text and percentage verticalli (middle)-CodePudding

  <div >
                    <div >Do you use Instagram?</div>
                    <table >
                        <tbody>
                            <tr>                            
                                <td hljs-string">n-yes-answer n-fill">Sure<span ></span><span hljs-string">n-yes-percentage">91 %</span></td>
                                <td hljs-string">n-yes-answer n-fill"><span hljs-string">n-no-percentage">9 %</span>No... Should I?</td>
                            </tr>
                        </tbody>
                    </table>
               </div>



.n-yes-no-polls-wrapper {
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.n-yes-no-question {
  text-align: center;
  font-weight: bold;
  margin-top: 5rem;  
}

.n-yes-no-answer {
  border: 1px solid red;
  text-transform: uppercase;
  text-align: center;
  width: 50%;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
}

.n-yes-no-table {
  border-collapse: separate;
  border-spacing: 2rem;
}

.n-yes-no-table > tr {
  width: 100%;
}

.n-yes-no-percentage {
  font-size: small;
  font-weight: bold;
  background-color: black;
  color: white;
  vertical-align: middle;
  padding: 1rem;
  line-height: 0;  
}

.n-yes-no-percentage-background {
  background-color: red; 
  width: 90%; 
  float: left;
  display: block;
}

.n-yes-percentage {
  float: right;
}

.n-no-percentage {
  float: left;
}

Neither the text of the question is not aligned vertically in the middle. Nor the percentage.

Could you help me?

CodePudding user response：

Needs HTML updates.

<td class="n-yes-no-answer n-yes-answer n-fill">Sure<span class="n-yes-no-percentage n-yes-percentage">91 %</span></td>
<td class="n-yes-no-answer n-yes-answer n-fill"><span class="n-yes-no-percentage n-no-percentage">9 %</span>No... Should I?</td>

and css append.

.n-yes-no-answer {
    ...
    line-height: 30px;
}

CodePudding user response：

Here is the working solution:

Wrap your table in a parent div to center the table.

Final CSS style:

.n-yes-no-polls-wrapper {
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.n-yes-no-question {
  text-align: center;
  font-weight: bold;
  margin-top: 5rem;
}

.n-yes-no-answer {
  border: 1px solid red;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  position: relative;
  padding: 10px;
}

.n-yes-no-table {
  border-collapse: separate;
  align-content: center;
  align-items: center;
  border-spacing: 2rem;
}

.n-yes-no-table > tr {
  width: 100%;
}

.n-yes-no-percentage {
  font-size: small;
  font-weight: bold;
  background-color: black;
  color: white;
  vertical-align: middle;
  padding: 1rem;
  line-height: 0;
}

.yes {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.block {
  display: flex;
  background-color: black;
  color: white;
  width: 50px;
  height: 30px;
  justify-content: center;
  align-items: center;
}
.n-yes-no-percentage-background {
  background-color: red;
  width: 90%;
  float: left;
  display: block;
}

.n-yes-percentage {
  padding: 5px;
  margin: 5px;
}

.n-no-percentage {
  padding: 5px;
  margin: 5px;
}

.container {
  display: flex;
  justify-content: center;
}

span {
  display: flex;
  flex-direction: column;
}