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 center of the image/button.

Answer 1

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>

Answer 2

Try this,

HTML Code:

<input type="submit" value="Login" class="myButton"/>

CSS:

.myButton {
    background-color:#44c767;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
    background-color:#5cbf2a;
}
.myButton:active {
    position:relative;
    top:1px;
}

Answer 3

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 4

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

#button {
    text-align: center;
}

Answer 5

Here you can find your code

take a look at bootstrap framework as well

http://jsfiddle.net/Lw2nhc26/

<div class="button">
    Button
</div>

.button {
    padding:10px;
    background-color:#000000;
    width 100%;
    color:#FFFFFF;
    text-align: center;
    border-radius:5px;
}

Answer 6

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

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

Answer 7

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 8

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>