Текст на картинке/кнопка

Question

Как сделать текст над изображением/кнопкой, используя html/css.

Например: у меня есть кнопка (кнопка входа в систему). Я хочу, чтобы текст «Вход» был помещен над этой кнопкой. Текст должен быть центром кнопки image /.

Answer 1

Попробуйте это,

HTML код:

<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 2

центрирования перед изображением

Если вам нужно центрировать текст поверх изображения, вы можете обернуть img в DIV, использование позиционирование на самом img, а также текст.

Тогда вы сможете центрировать это с помощью преобразований (поддерживающих многострочный текст).

демо

.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>

---

Изображения с кнопками

Поскольку кнопка элементы центрированы автоматически по умолчанию, вы вопрос будет добавить изображение кнопка.

Этого можно достичь, используя свойство background-image.

Так что в вашем CSS используйте что-то вроде:

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

регулировки размера с помощью

background-size:100% 100%; 

растянуть его до полного размера кнопки.

Answer 3

Вы можете просто установить свойство background-image соответствующего button (или другого элемента, если вы используете вместо button).

Обратите внимание, что вы можете контролировать высоту/вертикальное центрирование текста с помощью line-height, однако, если текст многострочный это может иметь другие вопросы, так что вы можете прибегнуть к помощи padding или вспомогательный элемент с top:50%;tranform:translateY(-50%);

При использовании семантически правильный button элемент, текст выровнен по центру, по умолчанию, в противном случае просто установите 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 4

Инкапсулируйте текст между тегами кнопок. В CSS, выберите кнопку и сделать что-то вроде этого

#button { 
    text-align: center; 
} 

Answer 5

Здесь Вы можете найти Код

взглянуть на рамки начальной загрузки, а

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

Используйте этот код. По умолчанию будет выполняться выравнивание по центру.

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

Answer 7

Как я уже упоминал в своем комментарии, вы можете иметь div с фоновым изображением.

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

Как насчет использования таблицы? Вы можете найти пример здесь: https://www.w3schools.com/html/html_tables.asp

В противном случае это может выглядеть примерно так:

<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>