以图像为中心

Question

如何使用html / css在图像/按钮上创建文本。

例如：我有一个按钮（登录按钮）。我希望将文本“Login”放在该按钮上。文本应该是图像/按钮的中心。

Answer 1

您只需设置相关background-image的{{1}}属性（或者如果您使用其他元素代替button）。

请注意，您可以使用button控制文字的高度/垂直居中，但是，如果文字是多行的，则可能还有其他问题，因此您可能希望使用line-height ，或具有padding

的子元素

如果使用语义上有效的top:50%;tranform:translateY(-50%);元素，默认情况下文本居中对齐，否则只需设置button

＆＃13;

text-align:center

＆＃13;

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 */
}

＆＃13;

Answer 2

试试这个，

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 3

以图像为中心

如果您需要在图片上居中文字，可能需要将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 4

在按钮标记之间封装文本。在CSS中，选择按钮并执行类似这样的操作

#button {
    text-align: center;
}

Answer 5

您可以在这里找到您的代码

看一下bootstrap框架

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>

图像/按钮上的文字

8 个答案:

以图像为中心

带按钮的图像