Align text on background image without positioning

Question

I want to position my text exactly in the center of my background image without using and position relative or absolute. Most of the answers online use position absolute for the text and a top. But i don't want to use any positioning method of approach in my case.

Are they any other available approaches to position a child element in the center of a parent element?

.parent-element{
  position:relative;
  .child-element{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
  }
}

http://stackoverflow.com/help/how-to-ask - Share your working code.! Because of you, someone can get negative vote for his attempt to answer — Deepak Yadav, Oct 20 '16 at 05:59
http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css?noredirect=1&lq=1 — Paulie_D, Oct 20 '16 at 11:23

score 0 · Answer 1 · answered Oct 20 '16 at 05:45

0

Did you try:

margin: 0 auto;
text-align: center;
vertical-align: middle;

answered Oct 20 '16 at 05:45

Jared Chu

2,757
4
27
38

It property has limited application. Only for "inline-level and 'table-cell' elements" – Kas Elvirov Oct 20 '16 at 06:14
there is another way, use jquery to set your text margin-top equal (parrentHeight - yourTextHeight)/2. That's all I know – Jared Chu Oct 20 '16 at 06:20
This is just a simple centering element. Using additional technologies is possible, but redundant. – Kas Elvirov Oct 20 '16 at 06:22
I have found an alternative question, hope this help http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css – Jared Chu Oct 20 '16 at 06:25
I've already said that `line-height` it's one of the most reliable solutions for it. – Kas Elvirov Oct 20 '16 at 06:33

score 0 · Answer 2 · answered Oct 20 '16 at 05:55

You can use also the inline margin(top,bottom,right or left) to positioning where you want your image. You simply have to put your margin with px(es margin:10px) and you can try this online on the browser(normally just press F12 and you have the screen with all information)

chirag · Answer 3 · 2016-10-20T06:05:33.910

0

you can use flex for it.

.container {
    display: flex;
    width: 350px;
    height: 350px;
    background-image: url('http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png')
}

.item {
    background-color: white;
    width: 80px;
    height: 80px;
    margin: auto;
}

<div class="container">
  <div class="item">Sample Text</div>
</div>

edited Oct 20 '16 at 06:05

answered Oct 20 '16 at 06:01

chirag

1,761
1
17
33

It's not flexible for using. IE has partial support for it since 11 version only. – Kas Elvirov Oct 20 '16 at 06:03
it can be support with prefix. see this link: http://www.w3schools.com/css/css3_flexbox.asp – chirag Oct 20 '16 at 06:07
It's not necessary to litter your code only because you wanna simple solution. – Kas Elvirov Oct 20 '16 at 06:11
but the fact is, answer is right. you cant downvote. and also you have specified nothing – chirag Oct 20 '16 at 06:37
Of course right. We are talking about the feasibility of the approach. – Kas Elvirov Oct 20 '16 at 06:41

score -1 · Answer 4 · answered Oct 20 '16 at 06:02

-1

Using Flexbox solves the issue quite easily

.test{
  background-image:url("http://blogueandoalos50.com/wp-content/uploads/2015/01/fondo9.jpg");
  height:200px;
  display: flex;
  align-items: center;
  justify-content: center;
  }

<div class="test">Hello World</div>

answered Oct 20 '16 at 06:02

abhirathore2006

3,317
1
25
29

its css, and every browser behaves different.. if you want full support use JavaScript or you can check this one http://stackoverflow.com/questions/17447807/cross-browser-support-for-css-flexbox @ArtemSolovev marking others answer -1 doesn't help you. specially when it solves the issue ...and user isn't specified specific browser requirements – abhirathore2006 Oct 20 '16 at 06:08
@ArtemSolovev world moves forward and there are compilers which auto generate the browser support so.. code doesn't get polluted, you just write original flex version... – abhirathore2006 Oct 20 '16 at 06:13

Align text on background image without positioning

4 Answers4