I'm using a Material Design (MDL) card to display numeric values in the title. I want them to be aligned right but by default they are left aligned. I've tried setting various styles but they all are ignored. How can I right align the h2 in the card title?
<div class="mdl-card card--count">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">
999
</h2>
</div>
<div class="mdl-card__supporting-text"><slot /></div>
</div>
text-align: right; won't work as .mdl-card__title is using flex, so you have to change the justify-content property:
.mdl-card__title {
justify-content: flex-end;
}
https://jsfiddle.net/f7ykzx1c/1/
Related
here's the image
Like showing in this image I want to pack divs inside short eats div. For example, the fish bun div can put beside chinese rolls div likewise. I just want no white space there. Those divs are dynamically appear though.
I've added my laravel view code below if you need.
<div class="col-md-4 border border-primary rounded">
<h4>Short Eats</h4>
#foreach($shorteats as $shrt)
<div>
{{$shrt->dish_name}}
</div>
#endforeach
</div>
<div class="col-md-4 border border-primary rounded">
<h4>Rice</h4>
#foreach($rice as $ric)
<div>
{{$ric->dish_name}}
</div>
#endforeach
</div>
You can add a class (e.g. .menu-container) to your <div>, that is the parent of your anchor tag, and use flexbox to (hopefully) achieve what you're after:
HTML:
<div class="menu-container">
{{$ric->dish_name}}
</div>
CSS:
.menu-container {
display: flex;
flex-wrap: wrap;
}
.food-item {
// styles for your anchor tag go here
}
I have
<div class="dashboard_content-area">
<div class="infinity-loader" style="justify-content: center;">
<div class="la-ball-beat" style="justify-content: center;">
<div class="dreikanter la-ball-beat__item">1</div>
<div class="dreikanter la-ball-beat__item">2</div>
<div class="dreikanter la-ball-beat__item">3</div>
</div>
</div>
</div>
But it is still not centered inside of div. I have bootstrap enabled as well.
Add display: flex to the la-ball-beat class, that should center your content.
If you're using Bootstrap, then why don't you just use a Bootstrap centering option?
I'd have to see more of what you are trying to center, but take a look at Offset with Bootstrap.
https://getbootstrap.com/docs/3.3/css/#grid-offsetting
Use absolute positioning and measure the offset in pixels using your favourite photo editor. Iterate until it's in the middle.
I'm using the Bootstrap 3 grid to hide/show nav bar content based on whether or not the user is using an extra small device.
I'm using .hidden-xs and .visible-xs classes. These classes appropriately hide/show the content, but I'm running into two problems:
(1) Hiding the content also shrinks the column spacing by .col-xs-5 because the div is hidden. I tried adding .visible-xs to a subsequent div and using .col-xs-5 to make up the empty space. This works, but only if I place content inside the divs. I just want the columns to be spaced out.
(2) On XS view size, the final item on the Nav bar "Nav" jumps to the next row. I have only accounted for 12 total columns.
See this JSFiddle. I'm trying to nly show "Welcome" on large view and show nothing on XS view.
I here's an idea, you can try instead of adding content. This CSS trick uses :before and :after CSS pseudo-classes.
.no_content {
display: block;
content: "";
width: 151px;
height: 35px;
background: transparent url(tape.png) 0 0 no-repeat;
}
<div class="no_content"></div>
I would look at the grid system further. I believe there is an offset that you can use to offset the div like this:
<div class="row">
<div class="col-xs-5 col-xs-offset-5></div>
<div class="col-xs-2></div>
</div>
Use the pull-right bootstrap class instead of trying to make empty div's fill in the space.
Completely remove the div you added in item (1) to "make up the space". On the div containing "Nav" set the class as pull-right col-xs-1. So the code from your JSFiddle becomes:
<div class="container">
<div class="row" id="header">
<div class="col-xs-5" id="brand-wrapper">
<div class="brand">Brand</div>
</div>
<!-- Hidden on XS Devices -->
<div class="hidden-xs col-xs-5">
<p>
Welcome
</p>
</div>
<!-- Nav -->
<div class="pull-right col-xs-1" id="toggle-wrapper">
<p>Nav</p>
</div>
</div>
</div>
I am building a web site. My web site will have blocks of content. Each block will have a title, some text, and an icon. My challenge is, I'm trying to vertically center each icon in the block. Currently, I have the following HTML or you can look at the jsfiddle.
<blockquote>
<div class="row">
<div class="small-10 columns">
<h4>The Block Title</h4>
<em>Some small blurb</em>
<p>Here is a paragraph relating to this block. It may include a couple of sentences. These sentences will wrap. Ultimately, the heart needs to be vertically centered.</p>
</div>
<div class="small-2 columns">
<span class="fi-heart" style="font-size:4rem;"> </span>
</div>
</div>
</blockquote>
In this code block, I'm using Zurb Foundation to help with layout. However, I can't seem to get the heart icon to center vertically in my right column. Does anyone know how I can do this with CSS?
Thank you
Add a line-height property to your inline style for <span class="fi-heart"> with a value equal to the font-size:
font-size:4em; line-height: 4em
My problem can be better understood by the image below.
I have several div elements (div A) which have a variable size that depends on their content.
They are displayed inblock inside a larger container with a max-with defined(the large outer rectangle without a name).
Everything works fine until I had inside divs A two other divs (B and C) which I what that look like the image.
I haven´t been successful. I've tried several combinations of css properties like display, margin, padding, float... negative margins... tables...
Any help would be welcome.
Update
the code looks like the example:
html
<div style="max-width: 800px;">
<div class="div_a">
<div class="div_b">
short text
</div>
<div class="div_c">
short text
</div>
</div>
<div class="div_a">
<div class="div_b">
looooong text
</div>
<div class="div_c">
looooong text
</div>
</div>
<div class="div_a">
<div class="div_b">
huuuuuge text
</div>
<div class="div_c">
huuuuuge text
</div>
</div>
</div>
css
.div_a{
display: inline;
}
.div_b{
display: block; /* doesn't work*/
}
.div_c{
display: block; /* doesn't work*/
}
If I understand correctly, this should do it:
.div_a{
display: inline-block;
}
:)
...assuming you don't have other styles, besides border and spacing properties.
A fiddle example here