文本对齐：正确;保持保证金，无论我尝试什么

我有这个简单的代码，显示星期几，时间和日期。文本应按照css的规定正确对齐，但我不知道为什么它不固定在屏幕的右侧（不包括边距），它总是在边框之间保留一个大的空间窗户和自己。文本对齐：正确;保持保证金，无论我尝试什么

<div class="droite" id="time" > 
</div> 

#time{ 
    text-align: right; 
    display:table-cell; 
} 

.droite{ 
    width: 73%; 
    display:table-cell; 
    vertical-align:middle; 
}

来源

2016-11-22 Ezhno

请尝试使用您的浏览器开发工具。 '＃aszone'和身体本身有一定的差距。 –

@KilianStinson我确实在ASzone的每一边都有20px的边距，但正如您可能注意到的，右边的边距高于20px。这是我不明白的一点 – Ezhno

这不是边距，它是表格的宽度。你可以将'aszone'的宽度设置为'calc（100％ - 40px）'（40px是你的保证金的两倍），它可以工作。您也可以按照下面的建议去除'display：table'。 – oboer

在#aszone删除display: table;并添加float: left和float: right分别.gauche和.droite。

https://jsfiddle.net/qsdtfztf/

来源

2016-11-22 07:42:25

谢谢罗杰，这就是我一直在寻找的.. tho文本不再是垂直对齐在我的div，我该如何解决这个问题？ – Ezhno

如果您知道确切的高度，可以将文本元素的“行高”设置为与容器相同的高度。 http://jsfiddle.net/qj40hfvd/ –

很多的browers有默认的风格，就像总有周围的镀铬body元素加上了8px利润率。所以你应该做的是清除默认样式。

来源

2016-11-22 07:38:09 tomasran

您不需要在代码中添加display:table-cell属性。只需删除该属性...然后它将按照您的要求保证金。结帐您的答案：

(function() { 
 
    function checkTime(i) { 
 
     return (i < 10) ? "0" + i : i; 
 
    } 
 

 
    function startTime() { 
 
     var months = [ 'Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ], 
 
      days = [ 'Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi' ] 
 
    
 
     var today = new Date(), 
 
      d = today.getDay(), 
 
      f = today.getDate(), 
 
      m = today.getMonth(), 
 
      y = today.getFullYear(), 
 
      
 
      h = checkTime(today.getHours()), 
 
      i = checkTime(today.getMinutes()); 
 
     
 
     var val = days[d]+'<br>'+h+':'+i+"</span><br>"+f+' '+months[m]+' '+y; 
 
     
 
     document.getElementById('time').innerHTML = val; 
 
     
 
     t = setTimeout(function() { 
 
      startTime() 
 
     }, 500); 
 
    } 
 
    
 
    startTime(); 
 
})();

#time{ 
 
\t text-align: right; 
 
\t //display:table-cell; 
 
    
 
} 
 

 
#aszone{ 
 
\t margin-left: 20px; 
 
\t margin-right: 20px; 
 
\t height: 10%; 
 
\t display:table; 
 
\t background-size: cover; 
 
} 
 

 
.gauche{ 
 
\t width: 27%; 
 
\t text-align: left; 
 
\t display:table-cell; 
 
} 
 

 
.droite{ 
 
\t width: 73%; 
 
\t //display:table-cell; 
 
\t vertical-align:middle; 
 
    margin-left:20px; 
 
} 
 

 
.helper{ 
 
\t display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 

 
img{ 
 

 
\t vertical-align: middle; 
 
\t width: 150px; 
 
}

<div id="aszone"> 
 
      <div class="gauche"> 
 
       <span class="helper"></span> 
 
       <img src="http://www.tablesandfables.com/wp/wp-content/uploads/2016/06/youtube-logo.jpg"> 
 
      </div> 
 

 
      <div class="droite" id="time" > 
 
      </div> 
 
</div>

来源

2016-11-22 07:41:16

如：

body { 
 
    margin: 0; 
 
}

来源

2016-11-22 07:42:05 tomasran

文本对齐：正确;保持保证金，无论我尝试什么

回答

相关问题