我想中心在我的頁面中間的文本HTML

我有三個不同的div標籤（不在對方內）與代碼，所以它有一個單詞向左，中或右，但中心是非常關閉居中。下面是HTML代碼：我想中心在我的頁面中間的文本HTML

.desc { 
 
    float: right; 
 
    color: skyblue; 
 
} 
 

 
.desc1 { 
 
    float: left; 
 
    color: skyblue; 
 
} 
 

 
.desc2 { 
 
    text-align: center; 
 
    color: skyblue; 
 
}

<div class="desc1"> 
 
    <h2>What we are here to do!</h2> 
 
    <p>Example</p> 
 
</div> 
 
<div class="desc2"> 
 
    <h2>What we have completed</h2> 
 
    <p>Recent work (can include pictures)</p> 
 
</div> 
 
<div class="desc"> 
 
    <h2>Company Description</h2> 
 
    <p>EXAMPLE!</p> 
 
</div>

來源

2017-07-28 joekazmac

已經問過的問題：https：//stackoverflow.com/questions/42187838/how-to-vertically-cente r-a-div-on-page/45110782＃45110782 – Super

如果你想讓它工作，你需要改變順序。要浮動到右側的元素必須是第一個或第二個。如果您將其作爲最後一個，那麼它不會以任何方式影響元素放置之前的位置。無論如何，你或許不應該這樣使用浮動功能;查看flexbox。 – CBroe

你可以顯示包含這個div的父標籤的代碼嗎？這可能是因爲父標籤的寬度不夠這3個div？ – 2017-07-28 13:15:06

您可以使用Flexbox的來解決這個問題，

HTML：

<div class="container"> 
    <div class="desc1"> 
    <h2>What we are here to do!</h2> 
    <p>Example</p> 
    </div> 
    <div class="desc2"> 
    <h2>What we have completed</h2> 
    <p>Recent work (can include pictures)</p> 
    </div> 
    <div class="desc"> 
    <h2>Company Description</h2> 
    <p>EXAMPLE!</p> 
    </div> 
</div>

CSS：

.container{ 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
}

來源

2017-07-28 13:18:43

工作正常。我打算髮佈一個類似的解決方案。 – Priyanjit

你可以添加解決方案的演示嗎？ –

@VictorAllegret它不會那麼好，因爲我們可以在這裏使用不同寬度的元素https://jsfiddle.net/uqr20k64/1/'space-between'只是在元素之間添加相等的空格。這個屬性並不關心元素的平等。 –

試試這個：

.desc2 { 
     height: 200px; 
     width: 400px; 
     color: skyblue; 

     position: fixed; 
     top: 50%; 
     left: 50%; 
     margin-top: -100px; 
     margin-left: -200px; 
    }

希望這是有益:)

來源

2017-07-28 13:17:14 Ahmad

試試這個

.desc { 
 
text-align: center; 
 
color: skyblue; 
 
width:33% 
 
} 
 

 
.desc1 { 
 
text-align: center; 
 
color: skyblue; 
 
width:33% 
 
} 
 

 
.desc2 { 
 
text-align: center; 
 
color: skyblue; 
 
width:33% 
 
} 
 
.desc4{ 
 
    display: flex 
 
}

<div class="desc4"> 
 
<div class="desc1"> 
 
    <h2>What we are here to do!</h2> 
 
    <p>Example</p> 
 
</div> 
 
<div class="desc2"> 
 
    <h2>What we have completed</h2> 
 
    <p>Recent work (can include pictures)</p> 
 
</div> 
 
<div class="desc"> 
 
    <h2>Company Description</h2> 
 
    <p>EXAMPLE!</p> 
 
</div> 
 
</div>

來源

2017-07-28 13:19:49

您也可以使用<center> </center>標籤。它對此很好。

來源

2017-07-28 13:20:23 JamesSkinner12

我的歉意，我忘了把中心標籤的代碼格式，所以他們沒有出現。現在更新。 – JamesSkinner12

您的desc2內容在技術上相對於剩餘空間而言居中。您的desc（右欄）被推到您的其餘內容下方，因爲它將從desc2內容結束的位置開始浮動。

最簡單的解決方案是將desc向上移動desc2以上，以便左側/右側浮動的物品先出現，並將從相同的y位置開始。

之後，如果你想確保你的主要內容是真正居中，你可能需要指定左/右列的寬度。

來源

2017-07-28 13:20:48 BoffinbraiN

你可以做什麼是真正包裹的3個div的另一個DIV中，並應用顯示：彎曲這個主要的div，像這樣：

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

 
.desc { 
 
    float: right; 
 
    color: skyblue; 
 
} 
 

 
.desc1 { 
 
    float: left; 
 
    color: skyblue; 
 
} 
 

 
.desc2 { 
 
    text-align: center; 
 
    color: skyblue; 
 
}

<div class="main"> 
 

 
    <div class="desc1"> 
 
    <h2>What we are here to do!</h2> 
 
    <p>Example</p> 
 
    </div> 
 
    <div class="desc2"> 
 
    <h2>What we have completed</h2> 
 
    <p>Recent work (can include pictures)</p> 
 
    </div> 
 
    <div class="desc"> 
 
    <h2>Company Description</h2> 
 
    <p>EXAMPLE!</p> 
 
    </div> 
 

 
</div>

由於浮動屬性在某些情況下有一些奇怪的行爲，顯示：flex當你想要並排顯示幾個部分時，它更適合。我真的建議你更多地瞭解這些柔性屬性，它們非常節省時間。我希望它可以幫助你。

來源

2017-07-28 13:21:11

它會工作不那麼好，因爲我們可以在這裏不同寬度的元素jsfiddle.net/uqr20k64/1'space-between'只是增加元素之間相等的空間。這個屬性並不關心元素的平等。 –

我真的不明白，但是你的意思是，如果有，例如，寬度爲900px的元素;一個寬度：200像素，另一個寬度：20像素，他們之間會有相同數量的空間？我沒有看到問題出在哪裏...... –

好的，讓我們來看看OP是否可以。 –

我會在現有的div上使用一個包裝併爲其定義一個flexbox。

.container { 
 
    width: 100%; 
 
    height: 100vh; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    padding: 10%; 
 
} 
 

 
.desc { 
 
    color: skyblue; 
 
}

<div class="container"> 
 
    <div class="desc"> 
 
    <h2>What we are here to do!</h2> 
 
    <p>Example</p> 
 
    </div> 
 
    <div class="desc"> 
 
    <h2>What we have completed</h2> 
 
    <p>Recent work (can include pictures)</p> 
 
    </div> 
 
    <div class="desc"> 
 
    <h2>Company Description</h2> 
 
    <p>EXAMPLE!</p> 
 
    </div> 
 
</div>

來源

2017-07-28 13:21:30 Gerard

它會工作不那麼好，因爲我們可以在這裏不同寬度的元素jsfiddle.net/uqr20k64/1'space-between'只是在元素之間添加相等的空間。這個屬性並不關心元素的平等。 –

試試這個。

body{ 
     width:900px; 
     align-items:center; 
     margin:0 auto; 
     }

我認爲這對你有幫助。

來源

2017-07-28 13:24:50

您可以爲此使用flexbox併爲您的body定義樣式或將此塊包裝在容器中。這裏不需要float。演示：

body { 
 
    /* become a flex-container */ 
 
    display: flex; 
 
    /* vertically center flex-items */ 
 
    align-items: center; 
 
    /* centering for text, optional here */ 
 
    text-align: center; 
 
    
 
    /* occupy all height */ 
 
    margin: 0; 
 
    height: 100vh; 
 
} 
 

 
/* equal width for children */ 
 
body > * { 
 
    flex: 1; 
 
} 
 

 
.desc { 
 
    color: skyblue; 
 
} 
 

 
.desc1 { 
 
    color: skyblue; 
 
} 
 

 
.desc2 { 
 
    color: skyblue; 
 
}

<div class="desc1"> 
 
    <h2>What we are here to do!</h2> 
 
    <p>Example</p> 
 
</div> 
 
<div class="desc2"> 
 
    <h2>What we have completed</h2> 
 
    <p>Recent work (can include pictures)</p> 
 
</div> 
 
<div class="desc"> 
 
    <h2>Company Description</h2> 
 
    <p>EXAMPLE!</p> 
 
</div>

來源

2017-07-28 13:27:04

如果你沒有使用浮動，你可以簡單地刪除花車和附上所有的div中alligns所有文本中心主DIV：

.desc { 
 
    color: skyblue; 
 
} 
 

 
.desc1 { 
 
    color: skyblue; 
 
} 
 

 
.desc2 { 
 
    color: skyblue; 
 
} 
 
.div1{ 
 
    text-align:center; 
 
}

<div class="div1" > 
 
<div class="desc1"> 
 
    <h2>What we are here to do!</h2> 
 
    <p>Example</p> 
 
</div> 
 
<div class="desc2"> 
 
    <h2>What we have completed</h2> 
 
    <p>Recent work (can include pictures)</p> 
 
</div> 
 
<div class="desc"> 
 
    <h2>Company Description</h2> 
 
    <p>EXAMPLE!</p> 
 
</div> 
 
</div>

來源

2017-07-28 13:27:16

我想中心在我的頁面中間的文本HTML

回答

相關問題