CODEWITHSUNDEEP
htmlcssalignmenttext-alignmentcenter-align
Paul hawai
Paul hawai

Reputation: 13

How to centre image and text together?

When I am using align-text: centre then text is centred, but the image is on the left side, and float: none; is not helping. What am I missing?

<table class="universe1" align="center">
  <tbody>
    <tr>
      <td>
        <div class="descriptext2" style="text-align: center; padding-top: 5px;">Text here<br><br>
        </div>
        <strong><img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png">     Right text</strong> <br>     <a href="mailto:email" target="_blank" rel="noopener noreferrer"><span style="color: #e12121;">right text</span><br><br><br></a>
        <strong> <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png"> Right text</strong><br><span style="color: #e82424;">     <a style="color: #e82424;" href="http://link.here" target="_blank" rel="noopener noreferrer">Right text<br><br><br></a></span>        <strong> <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png">     Right text</strong><br><span style="color: #e82424;">     <a style="color: #e82424;" href="https://contact.us" target="_blank" rel="noopener noreferrer">Right text<br><br><br></a></span>
        <strong> <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png">     Right text</strong><br><span style="color: #e82424;">     <a style="color: #e82424;" _blank="" rel="noopener noreferrer">Right text<br>      Right text<br><br><br><br></a></span>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 103

Answers (2)

ttoshiro
ttoshiro

Reputation: 526

It really depends on how you want it centered.

To center content horizontally (such that both the image and the text underneath it are centered across), use a container and set the flex-direction to column such that each successive image/text pair appear in the next line. Then, position both items in the middle latitudinally using the align-items property, as well as the text-align property so that the text is horizontally centered in the block element itself (as opposed to beginning on the right):

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Vertical alignment */
  justify-content: center;
  text-align: center;
}
<div class="descriptext2" style="text-align: center; padding-top: 5px;">Text here</div>
<br>
<div class="container">
  <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png">
  <p>
    <strong>Right text</strong>
    <br>
    <span style="color: #e12121;"><a href="mailto:email" target="_blank" rel="noopener noreferrer">Right text</a></span>
  </p>
</div>
<br>
<div class="container">
  <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png">
  <p>
    <strong>Right text</strong>
    <br>
    <span style="color: #e82424;"><a style="color: #e82424;" href="http://link.here" target="_blank" rel="noopener noreferrer">Right text</a></span>
  </p>
</div>

To center content vertically (such that both the image and the text beside it are centered lengthwise), use a container and position both items in the middle latitudinally using the align-items property and longitudinally using the justify-content property. Note that you can set the flex-direction: property (which appeared in the first example) to row such that each successive image/text appear in the same line, i.e. "back to back." Both above and below example, however, use columns:

.container {
  display: flex;
  justify-content: center; /* Horizontal alignment */
  align-items: center;
  /* Vertical alignment */
}
<div class="descriptext2" style="text-align: center; padding-top: 5px;">Text here</div>
<br>
<div class="container">
  <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png">
  <p>
    <strong>Right text</strong>
    <br>
    <span style="color: #e12121;"><a href="mailto:email" target="_blank" rel="noopener noreferrer">Right text</a></span>
  </p>
</div>
<br>
<div class="container">
  <img style="width: 48px; height: 48px; float: left;" src="https://file-qA333tsLkr.png" vertical-align: "middle">
  <p>
    <strong>Right text</strong>
    <br>
    <span style="color: #e82424;"><a style="color: #e82424;" href="http://link.here" target="_blank" rel="noopener noreferrer">Right text</a></span>
  </p>
</div>

Upvotes: 0

yinsweet
yinsweet

Reputation: 2851

I have made a code snippet. Please have a look. I have removed the float: left property in the <img> tag. I have added display: block; and margin: 0 auto; CSS for <img> tag. I am not sure if I understand you correctly.

img {
  display: block;
  margin: 0 auto;
}
<table class="universe1" align="center">
  <tbody>
    <tr>
      <td>
        <div class="descriptext2" style="text-align: center; padding-top: 5px;">Text here<br><br>
        </div>
        <strong><img style="width: 48px; height: 48px;" src="https://file-qA333tsLkr.png">     Right text</strong> <br>     <a href="mailto:email" target="_blank" rel="noopener noreferrer"><span style="color: #e12121;">right text</span><br><br><br></a>
        <strong> <img style="width: 48px; height: 48px;" src="https://file-qA333tsLkr.png"> Right text</strong><br><span style="color: #e82424;">     <a style="color: #e82424;" href="http://link.here" target="_blank" rel="noopener noreferrer">Right text<br><br><br></a></span>        <strong> <img style="width: 48px; height: 48px;" src="https://file-qA333tsLkr.png">     Right text</strong><br><span style="color: #e82424;">     <a style="color: #e82424;" href="https://contact.us" target="_blank" rel="noopener noreferrer">Right text<br><br><br></a></span>
        <strong> <img style="width: 48px; height: 48px;" src="https://file-qA333tsLkr.png">     Right text</strong><br><span style="color: #e82424;">     <a style="color: #e82424;" _blank="" rel="noopener noreferrer">Right text<br>      Right text<br><br><br><br></a></span>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Related Questions