居中文本無效

-1

從我所有的搜索中，我似乎都在使用正確的技術，但居中不會發生。居中文本無效

這是從我的.html文件的代碼塊：

<div id="section-movement" class="section-container"> 
     <div class="section-title"> 
      Movement <span class="center">*click entries for more details*</span><span class="float-right">limited by movement speed</span> 
     </div> 
    </div>

這是我的.css文件中的條目：

.center { 
    text-align: center; 
} 

.float-right { 
    float: right; 
}

輸出應該是這個詞「運動」左對齊，文本'點擊輸入更多細節'，應居中，文本'移動速度限制'應右對齊。左側和右側的文本工作正常，但「點擊更多詳細信息」文本不是居中，它只是緊跟着'運動'文本。

來源

2017-08-12 FlyingFree

span默認情況下是inline元素。您使用居中的方式爲，其內部爲 a span元素，因爲它是內聯的，所以它不會執行任何操作。

您可以使用<div> s而不是<span> s，這是塊元素（默認寬度：100％），但我不知道這是否是您想象的 - 在您當前的代碼中，它基本上是一個文本段的一部分...

看來你想分發左，中，右三個句子的部分。你可以把所有三個部分進入的DIV或跨越（在這種特殊情況下都不會有問題，因爲它們都成爲其容器的柔性定義彈性項），並添加此規則對於他們的父元素：

.section-title { 
    display: flex; 
    justify-content: space-between; 
}

下面是完整的代碼：

.section-title { 
 
    display: flex; 
 
    justify-content: space-between; 
 
}

<div id="section-movement" class="section-container"> 
 
    <div class="section-title"> 
 
    <span>Movement</span><span>*click entries for more details*</span><span>limited by movement speed</span> 
 
    </div> 
 
</div>

來源

2017-08-12 00:50:42 Johannes

我很確定你可以使用中心標籤......？

因此，這將是：

< '中心想要中心>

... ...內容

<'/中心>

但是，如果沒有撇號的。

來源

2017-08-12 00:47:06

那麼你爲什麼不（來自單詞「撇號」也）刪除撇號？Plus：'center'標籤在HTML5中無效：https：//www.w3schools.com/tags/tag_center.asp – Johannes

嘗試這樣的事情。

我對您的HTML做了一個小小的更新，並在我向左移動的範圍內放置了「運動」一詞。我使用右邊的類向右移動了跨度，並添加了文本對齊：中心到div，並使用一類以段爲中心的段標題。

請注意，您不需要以div爲中心的div上的text-align：center規則。

.section-title { 
    text-align: center; 
} 

.left { 
    float: left; 
} 

.right { 
float: right; 
}

https://jsfiddle.net/eulloa/k7LL0byt/1/

來源

2017-08-12 00:54:31 eulloa

居中文本無效

回答

相關問題