Question 43065 in Html Question posted in
Some basic documentation can be found here.

Vertically Centered Text in HTML inline CSS only. (Moodle quiz)

I would like to have some text vertically centered.

I am writing questions in the LMS Moodle and only have access to very basic HTML in a little text box to create the question, unfortunately I don’t know enough HTML. I don’t think I can use any CSS in this little textbox. At least, I don’t know how to. (Edit. I can use inline CSS styles, see answer below).

My end goal is to have some text next to a table with the text vertically centered with the height of the table. I couldn’t find the answer to this, hopefully it is not a duplicate. Any help is greatly appreciated. Thanks.

This is what I have so far:

<div>
  <p style="float: left">A&nbsp;=&nbsp;&nbsp;</p>
  <table style="float: left">
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
    </tbody>
  </table>
</div>

I am using style="float: left" so that the text and the table appear next to each other.

Tags:

2

Answers


  1. 0

    If inline styles are okay to you, then you can use display:flex property on parent div to arrange your components.

    I have use height:100vh which uses entire page height and center the child. You can adjust according to your needs.

    <div style='height:100vh; display:flex; justify-content:center; align-items:center;'>
  <p>A&nbsp;=&nbsp;&nbsp;</p>
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
    </tbody>
  </table>
   <p>=&nbsp;A&nbsp;&nbsp;</p>
</div>
    Login or Signup to reply.
  2. 0

    You can wrap your table inside another table.

      <table>
    <tbody>
      <tr>
        <td>A=</td>
        
        <td>
        
          <table>
            <tbody>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
              </tr>
              <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
              </tr>
            </tbody>
          </table>
          
        </td>
        
        <td> The text next to the table</td>
    </tbody>
  </table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search