仅为文本应用背景颜色

时间：2016-07-04 05:12:10

标签： html css

我想只突出显示文本，需要将文本放在中心，并且需要将按钮对齐以浮动到中心。我尝试了margin-left:auto;margin-auto;但不适用于输入标记

＆＃13;
＆＃13; 
.banner-heading{
  background-color: #99408c;
  font: 31px  roboto thin;
  color:#fff;  
  width:auto;
  text-align:center;
}
.banner-content{
  background-color: #99408c;
  font: 50px  roboto thin;
  color:#fff; width:auto;
  text-align:center;
}
.order {
  -moz-box-shadow:inset 0px 1px 0px 0px #ffa200;
  -webkit-box-shadow:inset 0px 1px 0px 0px #ffa200;
  box-shadow:inset 0px 1px 0px 0px #ffa200;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffa200), color-stop(1, #ffa200));
  background:-moz-linear-gradient(top, #ffa200 5%, #ffa200 100%);
  background:-webkit-linear-gradient(top, #ffa200 5%, #ffa200 100%);
  background:-o-linear-gradient(top, #ffa200 5%, #ffa200 100%);
  background:-ms-linear-gradient(top, #ffa200 5%, #ffa200 100%);
  background:linear-gradient(to bottom, #ffa200 5%, #ffa200 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa200', endColorstr='#ffa200',GradientType=0);
  background-color:#ffa200;
  border:1px solid #ffa200;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-family:Arial;
  font-size:30px;
  padding:9px 70px;
  text-decoration:none;
  text-shadow:0px 1px 0px #ffa200;
  margin-left:35%;
  margin-right:35%;
}
.order:hover {
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffa200), color-stop(1, #ffa200));
  background:-moz-linear-gradient(top, #ffa200 5%, #ffa200 100%);
  background:-webkit-linear-gradient(top, #ffa200 5%, #ffa200 100%);
  background:-o-linear-gradient(top, #ffa200 5%, #ffa200 100%);
  background:-ms-linear-gradient(top, #ffa200 5%, #ffa200 100%);
  background:linear-gradient(to bottom, #ffa200 5%, #ffa200 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa200', endColorstr='#ffa200',GradientType=0);
  background-color:#ffa200;
}
.order:active {
  position:relative;
  top:1px;
}
＆＃13; 
 <div class="row banner">
     <div class="col-md-12 col-sm-12 col-xs-12">
         <p class="banner-heading">ORDER ONLINE AND ENJOY HOMELY FOOD IN JUST</p>
         <P class="banner-content">3 SIMPLE STEPS</P>
         <p class="banner-button">
             <form method="post">
                 <input type="submit" name="register" value="LET ME ORDER" class="order"> 
             </form>
         </p>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

尝试以下代码，我希望这对您有所帮助。

.banner-heading {
  background-color: #99408c;
  color: #fff;
  display: inline;
  font: 24px roboto thin;
  text-align: center;
  width: auto;
}
.banner-content {
  background-color: #99408c;
  color: #fff;
  display: inline;
  font: 50px roboto thin;
  text-align: center;
  width: auto;
}
.row.banner {
  text-align: center;
  width: 100%;
}

.order {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffa200;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffa200;
	box-shadow:inset 0px 1px 0px 0px #ffa200;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffa200), color-stop(1, #ffa200));
	background:-moz-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-webkit-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-o-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-ms-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:linear-gradient(to bottom, #ffa200 5%, #ffa200 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa200', endColorstr='#ffa200',GradientType=0);
	background-color:#ffa200;
	border:1px solid #ffa200;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:30px;
	padding:9px 70px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffa200;
	margin-left:35%;
	margin-right:35%;
}
.order:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffa200), color-stop(1, #ffa200));
	background:-moz-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-webkit-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-o-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-ms-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:linear-gradient(to bottom, #ffa200 5%, #ffa200 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa200', endColorstr='#ffa200',GradientType=0);
	background-color:#ffa200;
}
.order:active {
	position:relative;
	top:1px;
}
<div class="row banner">
	     <div class="col-md-12 col-sm-12 col-xs-12">
		    <p class="banner-heading">ORDER ONLINE AND ENJOY HOMELY FOOD IN JUST</p>
			<P class="banner-content">3 SIMPLE STEPS</P>
			<p class="banner-button"> <form method="post">
		  
		    <input type="submit" name="register" value="LET ME ORDER" class="order">
		  
		  </form></p>
   </div>

答案 1 :(得分：1)

默认情况下，Div有display: block;，block元素会拉伸整个页面宽度。要仅突出显示文字，请为display:inline-block;和banner-heading设置banner-content。

现在要使用margin: auto;，应该为元素提供特定的宽度。因此，请设置order，banner-heading和banner-content的宽度。

注意： width: 100%;无效，因为此后不会留下任何空间。所以总是尽量给予尽可能多的宽度。

答案 2 :(得分：1)

.banner-heading{
	
	font: 31px  roboto thin;
    color:#fff;  
	width:auto;
	text-align:center;
	
}
.banner-content{
	
	font: 50px  roboto thin;
    color:#fff; width:auto;
	
	text-align:center;
}

.order {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffa200;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffa200;
	box-shadow:inset 0px 1px 0px 0px #ffa200;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffa200), color-stop(1, #ffa200));
	background:-moz-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-webkit-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-o-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-ms-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:linear-gradient(to bottom, #ffa200 5%, #ffa200 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa200', endColorstr='#ffa200',GradientType=0);
	background-color:#ffa200;
	border:1px solid #ffa200;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:30px;
	padding:9px 70px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffa200;
	margin: 0px auto;
}
.order:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffa200), color-stop(1, #ffa200));
	background:-moz-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-webkit-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-o-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-ms-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:linear-gradient(to bottom, #ffa200 5%, #ffa200 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa200', endColorstr='#ffa200',GradientType=0);
	background-color:#ffa200;
}
.order:active {

	top:1px;
}
   
.sbt_btn{
    text-align:center;
    
}
 <div class="row banner">
	     <div class="col-md-12 col-sm-12 col-xs-12">
		    <p class="banner-heading"><span style="background-color: #99408c">ORDER ONLINE AND ENJOY HOMELY FOOD IN JUST</span></p>
			<P class="banner-content"><span style="background-color: #99408c">3 SIMPLE STEPS</span></P>
			<form method="post">
		    <div class="sbt_btn">
		    <input type="submit" name="register" value="LET ME ORDER" class="order">
            </div>
		  
		  </form>
   </div>
</div>

相关问题
最新问题