CODEWITHSUNDEEP
htmlcss
Lukas Šalkauskas
Lukas Šalkauskas

Reputation: 14361

CSS text in center of background image

how can I center text on following (Sorry I'm new to CSS):

alt text

CSS:

suggestion_active { 
    background-image: url(../images/suggestion_active.jpg);
    background-repeat:no-repeat;
    position:inherit;
    float:inherit;
    width: 100px; 
    height: 36px;
}

suggestion_active_text {
    possition: absolute;
    font-family: "Lucida Grande", Tahoma;
    font-size: 12px;
    font-weight: lighter;
    text-align: center;
    color:#000;
    vertical-align: middle;
    padding:0px;
}

html:

 <suggestion_active><suggestion_active_text>1</suggestion_active_text></suggestion_active>

Also it would be nice if you tell me the best practices of how to do this :)

Upvotes: 6

Views: 49477

Answers (6)

matpvl
matpvl

Reputation: 63

suggestion_active_text {
    text-align: center;
    height: 100%;
    display: flex;
    place-content: center;
    align-items: center;
}

Upvotes: 0

Theorder
Theorder

Reputation: 779

Bit more modern answer maybe?

  1. Create a div
  2. Place text inside the div

Then using flexbox style div as follows:

  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;

ALTERNATIVELY for more dynamic positioning

set your background image div to

  positiion: relative;

AND your text box div to include

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  • This allows you to move text for instance 20% from the top instead of 50%.
  • translate(-50%,-50%) realigns the anchor of the text div to be in the center, which will be noticeable if you have longer text.

Upvotes: 5

Sebastian Devassy
Sebastian Devassy

Reputation: 117

I think Flex works better, you can make it aligned to center in both directions.

suggestion_active { 
    background-image:url(https://placeimg.com/120/120/tech/sepia);
    background-repeat:no-repeat;
    width: 100px; 
    height: 36px;
    display: flex;
    justify-content: center; //horizontal alignment
    align-items: center; //vertical alignment
}

suggestion_active_text {
    possition: absolute;
    font-family: "Lucida Grande", Tahoma;
    font-size: 12px;
    font-weight: lighter;
    text-align: center;
    color:#000;
    vertical-align: middle;
    padding:0px;
}

Upvotes: 0

Harmen
Harmen

Reputation: 22438

Set text-align: center; to center the text horizontally, and set line-height: [heightofbox]; to center the text vertically.

Here is a simple example of that

Note that, if you are working with invalid HTML elements, you need to set them as block elements. So, this should do the trick:

customEl {
  display: block;
  ...
}

Upvotes: 12

J V
J V

Reputation: 11936

Add the following to both of your tags and it should do the trick:

display: block;
width:100px;

Upvotes: 0

kobe
kobe

Reputation: 15835

You can remove suggestion_active_text..

Have one div with background image. inside that div do like this

<div style="text-align:center"> 1 </div>

give background image for above thats it

Upvotes: 0

Related Questions