I've been trying to figure out how to center an element inside a v-col for almost an hour
I can't find the right solution.
I am trying to center the a element by putting justify-content in the v-col, but it just stay
there and wont move.
<v-row v-if="hideFullDetail">
<v-col cols="12" md="9" style="justify-content: center;">
<a #click="displayFullDetail = !displayFullDetail">view more</a>
</v-col>
</v-row>
text-align: center is a property specific for this use case. Works either on the parent, or on the child itself if it is a block-level element.
Use this:
text-align: center;
(This is not specific to v-col).
For details see https://www.w3schools.com/cssref/pr_text_text-align.ASP
Related
I need to center all of the elements in a div thresholds-container. I'm using the CSS framework Foundation, but can't seem to figure out how to do this. I don't need them centered vertically, just all lined up horizontally within the div, and centered.
<div class="row" id="filters-container">
<div class="row" id="thresholds-container">
<h2 class="small-2 columns">Priority Thresholds:</h2>
<span data-has-options="icon--circle" class="icon--circle circle--accent3 icon-md icon-caret_double_up small-1 columns" id="high-priority-icon"></span>
<p class="small-2 columns" id="doh-high-priority">More than {{ dohHighPriority }} Days on Hand</p>
<span data-has-options="icon--circle" class="icon--circle circle--brand2 icon-md icon-caret_double_down small-1 columns" id="high-priority-icon"></span>
<p class="small-2 columns" id="doh-low-priority">Less than {{ dohLowPriority }} Days on Hand</p>
</div>
</div>
I've tried assigning margin: 0 auto too all of the elements, and that did not work. The elements stayed in place.
I've tried assigning the small-centered to each element, but that centers each element and stacks them vertically.
I just want an even amount of space on the left-most and right-most element. How would I do that?
EDIT: What I wound up doing for the time being was using offset on the left-most element to "center" all of them, but I feel like there must be a better way.
<h2 class="large-2 columns large-offset-2">Priority Thresholds:</h2>
This technically centers everything I need it to, but I would like to know how to actually center these elements without offsetting the left-most element.
I believe you are looking for .align-spaced or .align-justify depending if you want outer space or just spacing between elements.
https://foundation.zurb.com/sites/docs/flexbox-utilities.html#horizontal-alignment
See also https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
I have several buttons contained within divs that I would like to place on the same line. Two of the buttons are only displayed if a certain value is greater than 0. I added display:inline-block in a div container thinking that would place all of the enclosed divs on the same line but it didn't. I also need the buttons to float right (hence the style="float:right in the container div. I've also tried placing display=inline on each of the buttons which didn't work. Here is my HTML:
<div style="display:inline-block" style="float: right;">
<div *ngIf="menu.itemNumber > 0">
<button pButton type="button" label="Download" icon="fa-wrench" iconPos="left" (click)="Download();"></button>
<button pButton type="button" label="Upload" icon="fa-wrench" iconPos="left" (click)="Upload()"></button>
</div>
<button pButton type="button" style="float: right;" label="Delete" icon="fa-wrench" iconPos="left" (click)="Delete()"></button>
</div>
Why aren't the buttons showing up on the same line?
Its because you have a div inside which is block by default. Apply display:inline-block to all elements inside parent button div
Stack Snippet
.main>* {
display: inline-block;
}
<div class="main">
<div>
<button></button>
<button></button>
</div>
<button></button>
</div>
Your inner div (<div *ngIf="menu.itemNumber > 0">) is still a block level element. You need to give it display: inline-block, for it to be inline with the following button.
Also, do not duplicate the style property on your wrapper div. Combine the styles in one string: style="display:inline-block; float: right;" (this is assuming you still want the outer div to be inline-block - it may not need to be).
I also learned that sometimes, depending on the size of the content inside your buttons, or sibling elements, they might not be in the same baseline, meaning some will be higher than others, even if they are side by side. The way to fix baseline issues is to use a special kind of overflow (Like hidden or auto) on the sibling elements
EXAMPLE:
div sibling-elements{
overflow: hidden;
}
I'm having some difficulties with flexbox. As you can see, I have an aside element that holds an ordered list of social media icons. For some reason, I'm unable to make these icons stick to the BOTTOM on the containing div.
HTML CODE
<div class="outercontainer group">
<div class="dividing-row span_1_of_2 col">
<p> here is some text </p>
<aside>
<ol class="category-name">
<li><i class="fa fa-pinterest-p"></i></a></li>
<li><i class="fa fa-flickr"></i></a></li>
</ol>
</aside>
</div>
</div>
CSS CODE
.outercontainer // this keeps all containers the same height in fluid design
{
display: flex;
flex-wrap: wrap;
}
ol.category-name
{
display: inline-block;
color: #FFF;
align-self: flex-end!important; // this does not work
}
Can anyone help? am I missing the obvious?
Many thanks,
p
Here are a few things to consider:
When you create a flex container only the child elements become flex items. Any descendant elements beyond the children are not flex items and flex properties don't apply to them.
If you want to apply flex properties to the children of flex items, you need to make the flex item a flex container, as well. In other words, you need to create nested flex containers.
You haven't specified any heights for your containers. So the height of each container is based on the height of the content. If the content is a single row, you really don't have much height.
So in your HTML structure, the flex container is...
<div class="outercontainer group">
and the only flex item is...
<div class="dividing-row span_1_of_2 col">
The <p>, <aside>, <ol> and <li> are regular block elements. Flex properties don't apply.
If you want to use flex properties to align the social media icons at the bottom of the container, you need to make the parent a flex container and give it a height.
Here's a demo with more details: http://jsfiddle.net/f1qnjwd3/1/
Couple of more notes:
In your ordered list, you're missing an opening <a> tag.
In my demo, the heights are for demo purposes only. They may not align perfectly because I wasn't trying to create a perfect layout, just an illustration of how this answer works.
Okay, so this question has been asked and answered many times, yet I still can't produce a working solution.
I'd like to vertically align to the middle arbitrary elements in a DIV. So, the linked-to tutorial in the above question says:
Specify the parent container as position:relative or position:absolute.
Specify a fixed height on the child container.
Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
Set margin-top:-yy where yy is half the height of the child container to offset the item up.
An example of this in code:
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
...
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
Except contrary to what the screenshot on the tutorial shows, this doesn't work. The only thing I changed was to add a border around the outer DIV, so you can see the vertical alignment.
All this does is produce a zero-height DIV which renders like a straight line. If you add a height to the outer DIV, you can see the inner content, but it doesn't actually vertically align the content. So, why doesn't this example work?
I believe your containing div also has to have a specified height. If you inspect the #myoutercontainer div with firebug you see that it actually has a height of 13em, which they don't show in the example code given.
Here's a different approach based of this Chris Coyer article. If you want to vertically center the text to a fixed size div, then you can just repeat the process like so. If you want it to align to the right, just turn modify the "text-align: center;" style for myoutercontainer.
I have a number of divs with the same class, that I want to align vertically inside their container div.
The html part looks like this example:
<div id="container">
<div class="element">
........
</div>
<div class="element">
........
</div>
<div class="element">
........
</div>
</div>
I have floated the elements (divs with .element class) 'left' so they are all on one row. So far so good no problem yet.
The contents of the .element div vary. Now by default, they are aligned top, and I want to align them to the bottom using this css:
#container {position:relative;}
#container .element {position:absolute;bottom:0;}
Works and does align them to the bottom, but unfortunately it also sticks them together and they all look like they are in one place as one div, the one on top of the other.
Trying to set width, margin, padding etc.. to the .element div does nothing, they just act as one div.
What do I need to do to separate them ? I believe giving each div a separate class is not the right solution.
I also would not like to use table solutions, unless there is absolutely no other way.
I have tried vertical-align:bottom which for some reason does nothing.
I kept searching for long about this but nothing related comes up on the net, so if it's a duplicate I apologize.
Thanks in advance.
Well this is what the position:absolute is all about. I don't see why you use it.
If I understand right you want to vertical align the divs to the bottom and have them appear next to each other / beside each other ? Then most likely you have to modify the display css attribute of your divs to display:inline-block; or even use span tags instead.
You could wrap the #container div with another div, set its position to relative, and set the position of #container to absolute and it's bottom to bottom: 0
See my example