Reputation: 4333
Here's my basic HTML:
<div class="col-lg-12">
<div class="col-lg-4 center-block main-text center-text marg-small boxed">
<div class="random">Some Text</div>
<div class="col-lg-6 marg-small ">
<div id="pick_channel" class="boxed orange">
<div class="square vertical">Channel</div>
</div>
<div id="pick_objective" class="boxed orange">
<div class="square vertical">Objective</div>
</div>
</div>
</div>
</div>
And the relevant CSS:
.boxed{
display:flex;
flex-direction: column;
flex-wrap:nowrap;
align-items: center;
}
.square {
height:100px;
width:100%;
display:flex;
align-self:center;
margin-bottom: 10px;
}
.vertical{
}
I'm trying to end up with the id
s pick_channel
and pick_objective
as rectangles with the text "Channel" and "Objective" vertically and horizontally centered with their respective divs
. I've tried a bunch of combinations, but can't quite figure it out.
Upvotes: 0
Views: 167
Reputation: 1953
here you go
.boxed {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
height: 100px;
width: 100%;
margin: 10px 0;
}
.square {
margin-bottom: 10px;
width: 100%;
text-align: center;
}
.orange {
background: orange;
}
.center_content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
<div class="col-lg-4 center_content">
<div class="col-lg-6 marg-small ">
<div id="pick_channel" class="boxed orange">
<div class="square vertical">Channel</div>
</div>
<div id="pick_objective" class="boxed orange">
<div class="square vertical">Objective</div>
</div>
</div>
</div>
Upvotes: 1
Reputation: 8625
Something like this:
.boxed {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
}
.square {
height: 100px;
width: 100px;
/* display: flex; */
/* align-self: center; */
margin-bottom: 10px;
border: 1px solid gray;
text-align: center;
line-height: 100px;
}
<div class="col-lg-12">
<div class="col-lg-4 center-block main-text center-text marg-small boxed">
<div class="random">Some Text</div>
<div class="col-lg-6 marg-small ">
<div id="pick_channel" class="boxed orange">
<div class="square vertical">Channel</div>
</div>
<div id="pick_objective" class="boxed orange">
<div class="square vertical">Objective</div>
</div>
</div>
</div>
</div>
Upvotes: 1