我无法在我创建的此框的中心对齐文本。 这是我第二天使用CSS,所以我想我的代码存在一些问题。
让我告诉你我的材料。
这是我的HTML:
<div class="row">
<div class="section1">
<table class="featuredclub" id="featuredclub-comments">
<tr>
<td width="10%" class="rating">
<div class="ratingnumber">
<span class="ratingpositiontext">
<span style="margin-top:15px">#1</span>
</span>
</div>
</td>
<td width="15%" style="margin-left:0px;margin-top:1px" class="imagetd">
<div class="ratingimage">
<div style="margin-top:6px">
<img style="height:80px;width:80px" class="featuredavatar" src="/img/featuredtmp.png" />
</div>
</div>
</td>
<td width="75%" style="text-align:left;margin-left:10px">
<span class="featuredclubname"><xsl:value-of select="/*/hundreds/numcomments/featuredclub/name"/></span>
<span class="featuredclubaddress"><xsl:value-of select="/*/hundreds/numcomments/featuredclub/address"/></span>
<span class="featuredclublocality"><xsl:value-of select="/*/hundreds/numcomments/featuredclub/city"/>, <xsl:value-of select="/*/hundreds/numcomments/featuredclub/state"/> <xsl:value-of select="/*/hundreds/numcomments/featuredclub/zip"/></span>
<span class="featuredclubphone"><xsl:value-of select="/*/hundreds/numcomments/featuredclub/phone"/></span>
</td>
</tr>
</table>
</div>
</div>
这是我的CSS:
@CHARSET "ISO-8859-1";
span.value {
margin-right:-10px;
}
.viewallbutton{
display:inline;
margin-top:2px;
margin-left:2px;
}
h2.sectionlabel{
display:inline-block;
}
.banner{
position: relative;
background-color: #ffffff;
width: 1200px;
height: 62px;
margin: 0px auto;
padding-top:15px;
padding-bottom:0px;
padding-left:25px;
padding-right:25px;
box-sizing: border-box;
/**
border-top: 1px solid #d0d0d0;
border-left: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
border-bottom:none;
*/
border:0px;
border-bottom:1px solid #f0f0f0;
font: 14px/20px Arial, Helvetica, Sans-serif;
}
.banner h2{
font: 32px/32px DinWebCond, Sans-serif;
color: #120006;
margin: 0px 0px 5px 0px;
text-transform: uppercase;
padding-top:5px;
padding-bottom:15px;
}
div.banner-container1{
width:90%;
height:50px;
background-color:#f0f0f0;
padding-left:25px;
}
div.banner-container2{
width:90%;
height:50px;
background-color:#f0f0f0;
padding-left:25px;
/**padding-left:25px;*/
}
div.banner-container div.innerclubbox{
background-color:#ffffff;
}
.tabledatalabel{
font: 20px/24px DinWebCond, Sans-serif;
color: #606060;
margin: 0px 0px 5px 0px;
/**text-transform:capitalize;*/
padding-top:5px;
}
.row {
position: relative;
/**height: 750px;*/
height: 450px;
background-color: #ffffff;
width: 1200px;
margin: 0px auto;
/**padding-top:20px;*/
padding-top:10px;
padding-bottom:0px;
padding-left:0px;
/**padding-right:25px;*/
box-sizing: border-box;
/**border: 1px solid #d0d0d0;*/
font: 14px/20px Arial, Helvetica, Sans-serif;
}
p .clear{
clear:both;
}
.section1 .featuredclub{
width:100%;
height:100px;
background-color:#f0f0f0;
font:14px/20px AdlWebNorm, Sserif;
}
.section1 table.featuredclub,
.section2 table.featuredclub{
width:100%;
height:100px;
background-color:#f0f0f0;
font:14px/20px AdlWebNorm, Sserif;
margin-top:-5px;
/**margin-left:25px;*/
margin-bottom:10px;
}
.section1 table.featuredclub .rating,
.section2 table.featuredclub .rating {
/**margin-top:-5px;
margin-left:25px;
margin-bottom:10px;*/
/**background-color:#ffffff;*/
width:71px;
height:71px;
}
.section1 table.featuredclub .image,
.section2 table.featuredclub .image {
/**margin-top:-5px;
margin-left:25px;
margin-bottom:10px;*/
/**background-color:#ffffff;*/
width:71px;
height:71px;
margin-left:0px;
}
.ratingnumber{
font-size: 42px;
margin-left:20px;
width:80px;
height:80px;
background-color:#ffffff;
}
.ratingpositiontext{
margin-right:15px;
margin-top:55px;
}
.section1 table.featuredclub .rating div.ratingimage,
.section2 table.featuredclub .rating div.ratingimage{
font-size: 26px;
margin-left:0px;
width:80px;
height:80px;
background-color:#ffffff;
}
.section1 .featuredclub .featuredtext{
width:100%;
height:100px;
background-color:#f0f0f0;
font:14px/20px AdlWebNorm, Sserif;
display:inline-block;
}
.section1 .featuredclub span p.rating{
margin-top:-5px;
margin-left:25px;
margin-bottom:10px;
background-color:#ffffff;
width:71px;
height:71px;
/**display:inline;*/
}
.section1 .featuredclub span p.text{
margin-top:-5px;
margin-left:5px;
margin-bottom:10px;
background-color:#ffffff;
/**width:71px;*/
height:71px;
display:inline;
}
.section2 .featuredclub{
width:100%;
height:100px;
background-color:#f0f0f0;
font:14px/20px AdlWebNorm, Sserif;
}
.section1 .featuredclub span.featuredclubname,
.section2 .featuredclub span.featuredclubname
{
clear:both;
color:#120006;
float:left;
font: 22px/22px DinWebCond, Sans-serif;
}
.section1 .featuredclub span.featuredclubaddress,
.section2 .featuredclub span.featuredclubaddress
{
clear:both;
float:left;
font: 14px/20px AdlWebNorm, Serif;
color: #000000;
}
.section1 .featuredclub span.featuredclublocality,
.section2 .featuredclub span.featuredclublocality
{
clear:both;
float:left;
font: 14px/20px AdlWebNorm, Serif;
color: #000000;
}
.section1 .featuredclub span.featuredclubphone,
.section2 .featuredclub span.featuredclubphone
{
clear:both;
float:left;
font: bold 12px/12px Arial, Helvtica, Sans-serif;
margin-top:2px;
}
.section2 .featuredclub span p.rating,
{
margin-top:-5px;
margin-left:25px;
margin-bottom:10px;
background-color:#ffffff;
width:71px;
height:71px;
}
.section1 .featuredclub p.rating img.featuredavatar{
margin-top:-27px;
width:70px;
height:70px;
margin-left:69px;
}
.section2 .featuredclub p.rating img.featuredavatar{
margin-top:-27px;
width:70px;
height:70px;
margin-left:69px;
}
.section1 .featuredclub span p.rating span.rating-number-box
{
text-align:center;
font-size: 36px;
color:#bd673a;
margin-top:20px;
}
.section2 .featuredclub span p.rating span.rating-number-box
{
text-align:center;
font-size: 36px;
color:#bd673a;
margin-top:20px;
}
.section1 .featuredclub span{
/**margin-left:25px;*/
}
.section2 .featuredclub span{
/**margin-left:25px;*/
}
.section1 {
width:50%;
/**border-right: 1px solid #d0d0d0;*/
float:left;
box-sizing: border-box;
}
td {
font:14px/20px AdlWebNorm, Sserif;
}
.section2 {
width:50%;
/**border-right: 1px solid #d0d0d0;*/
float:left;
box-sizing: border-box;
}
.section1 h2{
font: 22px/24px DinWebCond, Sans-serif;
color: #120006;
margin: 0px 0px 5px 0px;
text-transform: uppercase;
padding-left:25px;
padding-bottom:10px;
}
.section2 h2{
font: 22px/24px DinWebCond, Sans-serif;
color: #120006;
margin: 0px 0px 5px 0px;
text-transform: uppercase;
padding-left:25px;
padding-bottom:10px;
}
td {
text-align:right;
}
td.imagetd{
text-align:left;
}
.progress-bar .horizontal {
float: left;
height: 45px;
width: 100%;
/**padding: 12px 0;*/
}
.progress-track {
position: relative;
width: 30%;
height: 13px;
background: #FFFFFF;
float:right;
margin-left:-20px;
}
.progress-fill {
position: relative;
background: #2272af;
height: 13px;
width: 50%;
color: #2272af;
text-align: center;
font-family: "Lato","Verdana",sans-serif;
font-size: 12px;
line-height: 20px;
/**border-radius:0px 5px 5px 0px;*/
border-radius:0px 0px 0px 0px;
}
/**tr td { padding-top: 1px }*/
以下是生成的HTML的一些图片:
如果你看起来数字值在右上角。我需要它在中心
我已经在这个工作了几个小时,并没有随处可见。
非常感谢任何帮助
答案 0 :(得分:1)
您可以将范围的line-height
设置为等于父元素的height
。 line-height
属性用于打印垂直间距。要理解它,当你在跨度内添加一个新单词时,该项目将换行到下一行,并且将以80px作为距离参数彼此等距间隔。
.section1 .featuredclub span {
line-height: 80px;
}
@CHARSET "ISO-8859-1";
span.value {
margin-right: -10px;
}
.viewallbutton {
display: inline;
margin-top: 2px;
margin-left: 2px;
}
h2.sectionlabel {
display: inline-block;
}
.banner {
position: relative;
background-color: #ffffff;
width: 1200px;
height: 62px;
margin: 0px auto;
padding-top: 15px;
padding-bottom: 0px;
padding-left: 25px;
padding-right: 25px;
box-sizing: border-box;
/**
border-top: 1px solid #d0d0d0;
border-left: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
border-bottom:none;
*/
border: 0px;
border-bottom: 1px solid #f0f0f0;
font: 14px/20px Arial, Helvetica, Sans-serif;
}
.banner h2 {
font: 32px/32px DinWebCond, Sans-serif;
color: #120006;
margin: 0px 0px 5px 0px;
text-transform: uppercase;
padding-top: 5px;
padding-bottom: 15px;
}
div.banner-container1 {
width: 90%;
height: 50px;
background-color: #f0f0f0;
padding-left: 25px;
}
div.banner-container2 {
width: 90%;
height: 50px;
background-color: #f0f0f0;
padding-left: 25px;
/**padding-left:25px;*/
}
div.banner-container div.innerclubbox {
background-color: #ffffff;
}
.tabledatalabel {
font: 20px/24px DinWebCond, Sans-serif;
color: #606060;
margin: 0px 0px 5px 0px;
/**text-transform:capitalize;*/
padding-top: 5px;
}
.row {
position: relative;
/**height: 750px;*/
height: 450px;
background-color: #ffffff;
width: 1200px;
margin: 0px auto;
/**padding-top:20px;*/
padding-top: 10px;
padding-bottom: 0px;
padding-left: 0px;
/**padding-right:25px;*/
box-sizing: border-box;
/**border: 1px solid #d0d0d0;*/
font: 14px/20px Arial, Helvetica, Sans-serif;
}
p .clear {
clear: both;
}
.section1 .featuredclub {
width: 100%;
height: 100px;
background-color: #f0f0f0;
font: 14px/20px AdlWebNorm, Sserif;
}
.section1 table.featuredclub,
.section2 table.featuredclub {
width: 100%;
height: 100px;
background-color: #f0f0f0;
font: 14px/20px AdlWebNorm, Sserif;
margin-top: -5px;
/**margin-left:25px;*/
margin-bottom: 10px;
}
.section1 table.featuredclub .rating,
.section2 table.featuredclub .rating {
/**margin-top:-5px;
margin-left:25px;
margin-bottom:10px;*/
/**background-color:#ffffff;*/
width: 71px;
height: 71px;
}
.section1 table.featuredclub .image,
.section2 table.featuredclub .image {
/**margin-top:-5px;
margin-left:25px;
margin-bottom:10px;*/
/**background-color:#ffffff;*/
width: 71px;
height: 71px;
margin-left: 0px;
}
.ratingnumber {
font-size: 42px;
margin-left: 20px;
width: 80px;
height: 80px;
background-color: #ffffff;
}
.ratingpositiontext {
margin-right: 15px;
margin-top: 55px;
}
.section1 table.featuredclub .rating div.ratingimage,
.section2 table.featuredclub .rating div.ratingimage {
font-size: 26px;
margin-left: 0px;
width: 80px;
height: 80px;
background-color: #ffffff;
}
.section1 .featuredclub .featuredtext {
width: 100%;
height: 100px;
background-color: #f0f0f0;
font: 14px/20px AdlWebNorm, Sserif;
display: inline-block;
}
.section1 .featuredclub span p.rating {
margin-top: -5px;
margin-left: 25px;
margin-bottom: 10px;
background-color: #ffffff;
width: 71px;
height: 71px;
/**display:inline;*/
}
.section1 .featuredclub span p.text {
margin-top: -5px;
margin-left: 5px;
margin-bottom: 10px;
background-color: #ffffff;
/**width:71px;*/
height: 71px;
display: inline;
}
.section2 .featuredclub {
width: 100%;
height: 100px;
background-color: #f0f0f0;
font: 14px/20px AdlWebNorm, Sserif;
}
.section1 .featuredclub span.featuredclubname,
.section2 .featuredclub span.featuredclubname {
clear: both;
color: #120006;
float: left;
font: 22px/22px DinWebCond, Sans-serif;
}
.section1 .featuredclub span.featuredclubaddress,
.section2 .featuredclub span.featuredclubaddress {
clear: both;
float: left;
font: 14px/20px AdlWebNorm, Serif;
color: #000000;
}
.section1 .featuredclub span.featuredclublocality,
.section2 .featuredclub span.featuredclublocality {
clear: both;
float: left;
font: 14px/20px AdlWebNorm, Serif;
color: #000000;
}
.section1 .featuredclub span.featuredclubphone,
.section2 .featuredclub span.featuredclubphone {
clear: both;
float: left;
font: bold 12px/12px Arial, Helvtica, Sans-serif;
margin-top: 2px;
}
.section2 .featuredclub span p.rating,
{
margin-top: -5px;
margin-left: 25px;
margin-bottom: 10px;
background-color: #ffffff;
width: 71px;
height: 71px;
}
.section1 .featuredclub p.rating img.featuredavatar {
margin-top: -27px;
width: 70px;
height: 70px;
margin-left: 69px;
}
.section2 .featuredclub p.rating img.featuredavatar {
margin-top: -27px;
width: 70px;
height: 70px;
margin-left: 69px;
}
.section1 .featuredclub span p.rating span.rating-number-box {
text-align: center;
font-size: 36px;
color: #bd673a;
margin-top: 20px;
}
.section2 .featuredclub span p.rating span.rating-number-box {
text-align: center;
font-size: 36px;
color: #bd673a;
margin-top: 20px;
}
.section1 .featuredclub span {
/**margin-left:25px;*/
}
.section2 .featuredclub span {
/**margin-left:25px;*/
}
.section1 {
width: 50%;
/**border-right: 1px solid #d0d0d0;*/
float: left;
box-sizing: border-box;
}
td {
font: 14px/20px AdlWebNorm, Sserif;
}
.section2 {
width: 50%;
/**border-right: 1px solid #d0d0d0;*/
float: left;
box-sizing: border-box;
}
.section1 h2 {
font: 22px/24px DinWebCond, Sans-serif;
color: #120006;
margin: 0px 0px 5px 0px;
text-transform: uppercase;
padding-left: 25px;
padding-bottom: 10px;
}
.section2 h2 {
font: 22px/24px DinWebCond, Sans-serif;
color: #120006;
margin: 0px 0px 5px 0px;
text-transform: uppercase;
padding-left: 25px;
padding-bottom: 10px;
}
td {
text-align: right;
}
td.imagetd {
text-align: left;
}
.progress-bar .horizontal {
float: left;
height: 45px;
width: 100%;
/**padding: 12px 0;*/
}
.progress-track {
position: relative;
width: 30%;
height: 13px;
background: #FFFFFF;
float: right;
margin-left: -20px;
}
.progress-fill {
position: relative;
background: #2272af;
height: 13px;
width: 50%;
color: #2272af;
text-align: center;
font-family: "Lato", "Verdana", sans-serif;
font-size: 12px;
line-height: 20px;
/**border-radius:0px 5px 5px 0px;*/
border-radius: 0px 0px 0px 0px;
}
/**tr td { padding-top: 1px }*/
.section1 .featuredclub span {
line-height: 80px;
}
<div class="row">
<div class="section1">
<table class="featuredclub" id="featuredclub-comments">
<tr>
<td width="10%" class="rating">
<div class="ratingnumber">
<span class="ratingpositiontext">
<span style="margin-top:15px">#1</span>
</span>
</div>
</td>
<td width="15%" style="margin-left:0px;margin-top:1px" class="imagetd">
<div class="ratingimage">
<div style="margin-top:6px">
<img style="height:80px;width:80px" class="featuredavatar" src="/img/featuredtmp.png" />
</div>
</div>
</td>
<td width="75%" style="text-align:left;margin-left:10px">
<span class="featuredclubname"><xsl:value-of select="/*/hundreds/numcomments/featuredclub/name"/></span>
<span class="featuredclubaddress"><xsl:value-of select="/*/hundreds/numcomments/featuredclub/address"/></span>
<span class="featuredclublocality"><xsl:value-of select="/*/hundreds/numcomments/featuredclub/city"/>, <xsl:value-of select="/*/hundreds/numcomments/featuredclub/state"/> <xsl:value-of select="/*/hundreds/numcomments/featuredclub/zip"/></span>
<span class="featuredclubphone"><xsl:value-of select="/*/hundreds/numcomments/featuredclub/phone"/></span>
</td>
</tr>
</table>
</div>
</div>
答案 1 :(得分:0)
我想在.ratingnumber{
font-size: 42px;
margin-left:20px;
width:80px;
height:80px;
background-color:#ffffff;
padding-left: ;
padding-top: ;
}
中使用填充可以正常工作
{{1}}