Text over the image/button

Question

How to make text over the image/button using html/css.

Eg: I have a button(Login Button). I want the text \"Login\" to be placed over that button. The text should be cen

Answer 1

As I mentioned in my comment, you can have a div with background image.

HTML

<div>
    Login
</div>

CSS

div{
    background-image:url("http://www.noao.edu/image_gallery/images/d4/androa.jpg");
    width: 200px;
    height: 100px;
    color: white;
    text-align: center;
    line-height: 100px;
    font-weight: bold;
}

Fiddle

Answer 2

Use this code. It will take centre alignment by default.

<button type="button">This is Button</button>

Answer 3

How about using a table? You can find an example here: https://www.w3schools.com/html/html_tables.asp

Otherwise it might look something like this:

<table class="form-group">
    <tr>
        <th><h6><label for="Machine Name" class="col col-form-label">Machine Name</label></h6></th>
    </tr>
    <tr class="col-12 col-md-2">
        <td><asp:TextBox ID="txtMachineName" ClientIDMode="Static" CssClass="form-control" MaxLength="256" runat="server" required="required"></asp:TextBox></td>
    </tr>

    <tr>
        <th><h6><label for="serialNumber" class="col col-form-label">Serial Number</label></h6></th>
    </tr>
    <tr>
        <td><asp:TextBox ID="serialNumber" ClientIDMode="Static" CssClass="form-control" MaxLength="256" runat="server" required="required"></asp:TextBox></td>
    </tr>
</table>

Answer 4

Encapsulate the text between the button tags. In CSS, select the button and do something like this

#button {
    text-align: center;
}

Answer 5

Centering in front of an image

If you need to center text over an image, you might want to wrap your img in a div, use positioning on the img itself as well as the text.

You would then be able to center this using transforms (supporting multi-lined text).

demo

.wrap {
  position: relative;
  display: inline-block;
  height: 300px;
  width: 300px;
}
img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
p {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: tomato;
  font-weight: bold;
}

<div class="wrap">
  <img src="http://lorempixel.com/300/300" />
  <p>some text</p>
</div>

---

Images with buttons

Since button elements are centered automatically by default, you're issue would be to add an image to the button.

This can be achieved using the background-image property.

So in your CSS use something like:

background-image:url(http://lorempixel.com/200/200);

adjusting the size using

background-size:100% 100%;

to stretch it to the full size of the button.

Answer 6

You can simply set the background-image property of the relevant button (or other element if you are using in place of a button).

Note that you can control height/vertical centering of the text using line-height, however, if the text is multi-line this may have other issues, so you may wish to resort to using padding, or a sub element with top:50%;tranform:translateY(-50%);

If using a semantically valid button element, text is center aligned by default, otherwise simply set text-align:center

button {
  line-height: 50px;
  width: 300px;
}
button.imgButton {
  color: white;
  background-image: url(http://abdpbt.com/tech/wp-content/uploads/2009/09/gradient.jpg);
  background-size:cover; /* <-- scale the image to cover the button */
  background-position:center center; /* <-- center the image in the button */
}

<button>Normal Button</button>

<button class='imgButton'>Image Button</button>