我已經閱讀了一百篇關于如何將一行 div 居中的帖子,但我似乎無法讓它發揮作用。我希望這些元素與其容器的中心對齊,同時保持每個元素之間的間隙。不管我做什么,他們都會擁抱左邊。
我是否需要更改容器元素上的 CSS 或單個 div 專案本身?
幫助!
.news_section {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.news_container {
border: 1px red solid;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.news_item { position: relative; float: left; font-family: graphik-light; font-size: 1.1em; margin: 25px 25px 25px 0px; width: 220px; height: 400px; cursor: pointer; transition: all 0.2s ease-out;
-webkit-box-shadow: 0px 3px 10px 1px rgba(204, 204, 204 0, 1);
-moz-box-shadow: 0px 3px 10px 1px rgba(204, 204, 204 0, 1);
box-shadow: 0px 3px 10px 1px rgba(204, 204, 204, 1);
}
.news_item:hover { background: #efefef; transform: scale(1.04); transition: all 0.2s ease-in; cursor: pointer; }
.news_img {
width: 100%;
height: 100%;
object-fit: contain;
}
.news_header { font-family: 'Oswald', sans-serif; font-size: 22px; line-height: 1.4em; text-align: left; margin-top: 18px; margin-left: 14px; margin-right: 14px; }
.news_outlet { font-size: 13px; text-align: left; margin-top: 7px; margin-left: 14px; color: #c1c1c1; font-family: graphik-regular; text-transform: uppercase; }
.news_subtext { font-size: 14px; text-align: left; margin-top: 20px; margin-left: 14px; margin-right: 14px; color: #4d5051; font-family: graphik-regular; }
.news_more { position: absolute; bottom: 10px; font-size: 16px; margin-left: 14px; color: #000; font-family: 'Oswald', sans-serif; }
<section class="news_section">
<div class="news_container">
<div class="news_item">
<div><img src="https://thruline.com/prototype/images/news/news.jpeg" class="news_img"/></div>
<div class="news_header">News title Here</div>
<div class="news_outlet">MAGAZINE OUTLET</div>
<div class="news_subtext">Description of articles goes here....</div>
<div class="news_more">Click Here to Read More...</div>
</div>
<div class="news_item">
<div><img src="https://thruline.com/prototype/images/news/news.jpeg" class="news_img"/></div>
<div class="news_header">News title Here</div>
<div class="news_outlet">MAGAZINE OUTLET</div>
<div class="news_subtext">Description of articles goes here....</div>
<div class="news_more">Click Here to Read More...</div>
</div>
<div class="news_item">
<div><img src="https://thruline.com/prototype/images/news/news.jpeg" class="news_img"/></div>
<div class="news_header">News title Here</div>
<div class="news_outlet">MAGAZINE OUTLET</div>
<div class="news_subtext">Description of articles goes here....</div>
<div class="news_more">Click Here to Read More...</div>
</div>
</div>
</section>
uj5u.com熱心網友回復:
在 news_item ... 改變那個
float: left;
到
display: inline-block;
.news_section {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.news_container {
border: 1px red solid;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.news_item { position: relative; display: inline-block; font-family: graphik-light; font-size: 1.1em; margin: 25px 25px 25px 0px; width: 220px; height: 400px; cursor: pointer; transition: all 0.2s ease-out;
-webkit-box-shadow: 0px 3px 10px 1px rgba(204, 204, 204 0, 1);
-moz-box-shadow: 0px 3px 10px 1px rgba(204, 204, 204 0, 1);
box-shadow: 0px 3px 10px 1px rgba(204, 204, 204, 1);
}
.news_item:hover { background: #efefef; transform: scale(1.04); transition: all 0.2s ease-in; cursor: pointer; }
.news_img {
width: 100%;
height: 100%;
object-fit: contain;
}
.news_header { font-family: 'Oswald', sans-serif; font-size: 22px; line-height: 1.4em; text-align: left; margin-top: 18px; margin-left: 14px; margin-right: 14px; }
.news_outlet { font-size: 13px; text-align: left; margin-top: 7px; margin-left: 14px; color: #c1c1c1; font-family: graphik-regular; text-transform: uppercase; }
.news_subtext { font-size: 14px; text-align: left; margin-top: 20px; margin-left: 14px; margin-right: 14px; color: #4d5051; font-family: graphik-regular; }
.news_more { position: absolute; bottom: 10px; font-size: 16px; margin-left: 14px; color: #000; font-family: 'Oswald', sans-serif; }
<section class="news_section">
<div class="news_container">
<div class="news_item">
<div><img src="https://thruline.com/prototype/images/news/news.jpeg" class="news_img"/></div>
<div class="news_header">News title Here</div>
<div class="news_outlet">MAGAZINE OUTLET</div>
<div class="news_subtext">Description of articles goes here....</div>
<div class="news_more">Click Here to Read More...</div>
</div>
<div class="news_item">
<div><img src="https://thruline.com/prototype/images/news/news.jpeg" class="news_img"/></div>
<div class="news_header">News title Here</div>
<div class="news_outlet">MAGAZINE OUTLET</div>
<div class="news_subtext">Description of articles goes here....</div>
<div class="news_more">Click Here to Read More...</div>
</div>
<div class="news_item">
<div><img src="https://thruline.com/prototype/images/news/news.jpeg" class="news_img"/></div>
<div class="news_header">News title Here</div>
<div class="news_outlet">MAGAZINE OUTLET</div>
<div class="news_subtext">Description of articles goes here....</div>
<div class="news_more">Click Here to Read More...</div>
</div>
</div>
</section>
更好的是,看看 flex-box:https ://css-tricks.com/snippets/css/a-guide-to-flexbox/
uj5u.com熱心網友回復:
如果要將所有專案對齊到中心,則需要使用Flexbox
. 基本上,您必須添加此代碼以將容器的所有內容對齊:
CSS:
.container: {
display: flex; /* flexbox */
justify-content: center; /* horizontal center */
align-items: center; /* vertical center */
}
這是一篇關于 的優秀文章Flexbox
,由 W3School 制作:
- W3School - CSS 彈性盒
uj5u.com熱心網友回復:
通過使用 flex 它將成為回應式在整頁中查看它以觀察差異
Remove margin: 25px 25px 25px 0px; to .news-item
和
use display:flex; justify-contnet:center; align-items:center; to
.news_container
.news_container {
/*border: 1px red solid;*/
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
margin-left: auto;
margin-right: auto;
text-align: center;
display:flex;
justify-content:center;
align-items:center;
}
.news_item { position: relative; font-family: graphik-light; font-size: 1.1em; width: 220px; height: 400px;
margin:10px; cursor: pointer; transition: all 0.2s ease-out;
-webkit-box-shadow: 0px 3px 10px 1px rgba(204, 204, 204 0, 1);
-moz-box-shadow: 0px 3px 10px 1px rgba(204, 204, 204 0, 1);
box-shadow: 0px 3px 10px 1px rgba(204, 204, 204, 1);
}
.news_item:hover { background: #efefef; transform: scale(1.04); transition: all 0.2s ease-in; cursor: pointer; }
.news_img {
width: 100%;
height: 100%;
object-fit: contain;
}
.news_header { font-family: 'Oswald', sans-serif; font-size: 22px; line-height: 1.4em; text-align: left; margin-top: 18px; margin-left: 14px; margin-right: 14px; }
.news_outlet { font-size: 13px; text-align: left; margin-top: 7px; margin-left: 14px; color: #c1c1c1; font-family: graphik-regular; text-transform: uppercase; }
.news_subtext { font-size: 14px; text-align: left; margin-top: 20px; margin-left: 14px; margin-right: 14px; color: #4d5051; font-family: graphik-regular; }
.news_more { position: absolute; bottom: 10px; font-size: 16px; margin-left: 14px; color: #000; font-family: 'Oswald', sans-serif; }
<section >
<section class="news_section">
<div class="news_container">
<div class="news_item">
<div><img src="https://thruline.com/prototype/images/news/news.jpeg" class="news_img"/></div>
<div class="news_header">News title Here</div>
<div class="news_outlet">MAGAZINE OUTLET</div>
<div class="news_subtext">Description of articles goes here....</div>
<div class="news_more">Click Here to Read More...</div>
</div>
<div class="news_item">
<div><img src="https://thruline.com/prototype/images/news/news.jpeg" class="news_img"/></div>
<div class="news_header">News title Here</div>
<div class="news_outlet">MAGAZINE OUTLET</div>
<div class="news_subtext">Description of articles goes here....</div>
<div class="news_more">Click Here to Read More...</div>
</div>
<div class="news_item">
<div><img src="https://thruline.com/prototype/images/news/news.jpeg" class="news_img"/></div>
<div class="news_header">News title Here</div>
<div class="news_outlet">MAGAZINE OUTLET</div>
<div class="news_subtext">Description of articles goes here....</div>
<div class="news_more">Click Here to Read More...</div>
</div>
</div>
</section>
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/424593.html
上一篇:如何在HTML中使用字體真棒圖示