How to Make Text Appear in Centre of The Image

Horizontal centering text over image via CSS

Try the following CSS:

.image {
    position:relative;
}

.text {
    left: 0;
    position:absolute;
    text-align:center;
    top: 30px;
    width: 100%
}

Vertically align text next to an image?

Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

How to make text appear next to centered image after it moves?

Here's a possible solution for you. I changed a lot in your code, main things being: The container just contains the elements you already have (not 200vh = twice the window height). Just add another container around that, and sibling following it. The transition affects all, i.e. width, opacity and transform: scale to keep the image centered when not hovered. And the hover is on the container, not on the image, that way preventing the jumping effect you had before:

.about-us {
  width: 100%;
  height: 150px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-content: center;
  margin-top: 50px;
}

.about-us .chatBox {
  position: relative;
  text-align: center;
}

.about-us .about-us-text-container {
  text-align: center;
  margin-left: 15px;
  opacity: 0;
  transition: all 1s;
  width: 0;
  transform: scale(0);
}

.about-us:hover .about-us-text-container {
  opacity: 1;
  width: 150px;
  transform: scale(1);
}

<section class="about-us">
  <div class="chatBox">
    <img src="https://picsum.photos/150" width="150" height="150" />
  </div>
  <div class="about-us-text-container">
    <h1>about us</h1>
    <hr />
    <p>For artists, not by artists</p>
  </div>
</section>

How to make text appear in centre of the image?

Added to @osteven answer. Below code works as I expected. Hope it helps others.

 func textToImage(drawText: NSString, inImage: UIImage, atPoint:CGPoint)->UIImage{

// Setup the font specific variables
var textColor: UIColor = UIColor.redColor()
var textFont: UIFont =  UIFont(name: "AmericanTypewriter", size: 75)!
let textStyle  = NSTextEffectLetterpressStyle

//Setup the image context using the passed image.
UIGraphicsBeginImageContext(inImage.size)

let textFontAttributes = [
    NSFontAttributeName: textFont,
    NSForegroundColorAttributeName: textColor,
    NSTextEffectAttributeName : textStyle
]

inImage.drawInRect(CGRectMake(0, 0, inImage.size.width, inImage.size.height))

 let textSize = drawText.sizeWithAttributes(textFontAttributes)
    if textSize.width < inImage.size.width {
        println("lesser")
        let textRect = CGRectMake(inImage.size.width / 2 - textSize.width / 2, 0,
        inImage.size.width / 2 + textSize.width / 2, inImage.size.height - textSize.height)
        drawText.drawInRect(textRect, withAttributes: textFontAttributes)
    }
    else {
        println("greater")
        let textRect = CGRectMake(0 , 0,
            inImage.size.width, inImage.size.height)
        drawText.drawInRect(textRect, withAttributes: textFontAttributes)

    }

var newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()

UIGraphicsEndImageContext()
return newImage

Center text under a image/icon within a div

.menu{  display:inline-block;  width:250px;  height:250px;  border-radius:50%;  margin-right: 20px;  font-size:20px;  color:#000000;  border: 4px double #000000;  line-height:250px;  text-align:center;  text-decoration:none;  background:#ffffff;}
  .menu:hover{    color:#ccc;    text-decoration:none;    background:#181547  }
  .menu img {    width: 150px;    height: 150px;  }  .test{    width: fit-content;  }  .text-center{    text-align: center;  }

<div class="wrapper" style="text-align: -webkit-center;">  {{ content }}  <span  style="display: flex; width: fit-content;">    <div class="test">      <a href="" class="menu"><img src="/assets/img/About_icon.jpg"></a><div class="text-center">About</div>    </div>        <div class="test"><a href="" class="menu">Insert Image</a><div class="text-center">Brands</div></div>    <div class="test"><a href="" class="menu">Insert Image</a><div class="text-center">DMS</div></div>      </span></div>

Center image using text-align center?

That will not work as the text-align property applies to block containers, not inline elements, and img is an inline element. See the W3C specification.

Use this instead:

img.center {    display: block;    margin: 0 auto;}

<div style="border: 1px solid black;"><img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>

How can I center an image and place text under it to the left or right?

Is this the kind of thing you are thinking of?

I've just added display: flex to the wrapper and then flex-direction: column makes sure that they are stacked in a column (not a row).

You can then change text-align property on the b to whichever you'd like (left, center or right).

p {  display: flex;  flex-direction: column;  width: 600px;  margin: auto;}
img {  width: 600px;  height: 150px;}
b {  text-align: left;}

<p align="center"><img src="http://via.placeholder.com/600x150">  <b>text under it</b></p>

how to put text on the middle of an image

img { vertical-align: middle; }

(although you'll probably want a more specific selector) and

<div>
<img alt="…" src="…" height="32" width="32"> This is some text.
</div>

---

Related Topics