Question

如何确保此弹性箱中的文字
1 - 2B线费城人队第2行 - 获得者：2001年草案（1-15）

出现在2行但是围绕图片中心对齐？如果居中过于复杂，那么与顶部对齐就没问题。

HTML： -

<!doctype html>
<html lang="en">
<head>
<title>gameplan.org.uk | A site for enthusiasts by enthusiasts.      
</title>

<link href="test.css" rel="stylesheet">

</head>

<header>Header</header>
<div id='main'>
<article>Player Page
<p>
<div class='playercontainer'>
<div class='playerbox1'>
<img src='800803.jpg' alt='Chase Utley'>
2B  Phillies
<p>Acquired by: Draft 2001 (1-15)</p>
</div>
<div class='playerbox2'>Player WAR</div>
<div class='playerbox3'>Player Details</div>
</div>
</p>
</article>
<nav>Menu</nav>
<aside>Stuff</aside>
</div>
<footer>Footer</footer>
</body>

CSS： -

body {
font: 24px Helvetica;
background: #999999;
color: rgba(0, 0, 0, .25);
}
#main {
min-height: 800px;
margin: 0px;
padding: 0px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 1;
order: 1;
}
#main > aside {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
header,
footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
}
/* Too narrow to support three columns */
@media all and (max-width: 640px) {
#main,
#page {
-webkit-flex-flow: column;
flex-flow: column;
}
#main > article,
#main > nav,
#main > aside {/* Return them to document order */
-webkit-order: 0;
order: 0;
}
#main > nav,
#main > aside,
header,
footer {
min-height: 50px;
max-height: 50px;
}
}
/*On the flex container*/
.playercontainer {


display: flex;
-webkit-flex-flow: row;
flex-flow: row;
-webkit-flex-wrap: wrap;/* Safari */
flex-wrap: wrap;
-webkit-justify-content: center;/* Safari */
justify-content: center;
-webkit-justify-content: space-around;/* Safari */
justify-content: space-around;
}
.playerbox1 {
border-style: solid;
border-color: #0000ff;
-webkit-order: 1;/* Safari */
order: 1;
-webkit-flex: 0 0 60%;
flex: 0 0 60%;
margin: 5px;
height: 135px;
}
.playerbox2 {
border-style: solid;
border-color: #ff0000;
-webkit-flex: 1 1 30%;
/* Safari */
flex: 0 0 30%;
-webkit-order: 1;
/* Safari */
order: 2;
margin: 5px;
}

.playerbox3 {
border-style: solid;
border-color: #ff0000;
-webkit-flex: 1 1 30%;
/* Safari */
flex: 0 0 80%;
-webkit-order: 1;
/* Safari */
order: 3;
margin: 5px;
}

Test site is here

Answer 1

将此属性提供给Flex容器

flex-direction: column;
justify-content: center;

在css-tricks上有一个很棒的cheatheet to flexbox，我将把链接留在这里：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox溢出的文本

1 个答案: