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
Related
I'm trying to make a website with Bulma, but I have run into this problem.
I'm trying to have a box with customizable content inside, but the content keeps going outside of the box.
Here's my simple code:
<p class="box center" style="width: 1000px; text-align: center;">content</p>
and my result is here.
Can anyone help me with this?
You should wrap your text in a div with a class of "box". That should do the trick. JSFiddle
<div class="column is-6 is-offset-3">
<div class="box">
<p class="title is-4">Your long text here</p>
</div>
</div>
Actually it is title class not box that wraps the text in a container
<p class="title is-6">Your long text here</p>
and is-6 makes it good enough to read in Desktop
<div class="input-group Flugo_group">
<h4 class="text-center">or</h4>
</div>
i am try to show in center but not working.second time using position relative but not working properly in responsive design.
I was facing the same problem in Bootstrap 4.1.0. Here is what I figured out:
I was doing this (having my paragraph inside div with class "row"):
<div class="container-fluid">
<div class="row" style="background-color: #009688;">
<p class="text-center" style="color: #fff;"> Meet me at</p>
</div>
</div>
Later I removed the class and it worked.
<div class="container-fluid">
<div style="background-color: #009688;">
<p class="text-center" style="color: #fff;"> Meet me at</p>
</div>
</div>
Bootstrap 3
v3 Text Alignment Docs
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
Bootstrap 4
v4 Text Alignment Docs
<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
In Bootstrap 4, for aligning center position:
Use class= "mx-auto"
example:
<p class="mx-auto">Kailash</p>
It will align the text horizontally center position.
I solved it this way.
<section className="d-flex">
<span className="mx-auto">Hello World!</span>
</section>
Bootstrap v5.
The input group field has display: flex which causes elements inside, including your paragraph, to not be at 100% width, but the width of their content only. The text is centred, however, the length of the paragraph is only as long as the characters or. To counter this you could use mx-auto which would centre the paragraph using margin auto on the X-axis, or w-100 which will make the paragraph be 100% the length of the parent instead of just something like width: max-content. The issue here isn't with the Bootstrap utilities, but rather flexbox.
I would strongly suggest that you use input group as shown in the documentation only. This is intended to create an inline group of buttons and it is not expected to have any other elements. I would altogether suggest removing the input group class.
It's most likely that you have your own stylesheet and your <h4> tag has text-align: left; or something like that. It could be .input-group or .Flugo_group as well. We'd need to see your code though.
Edit: Or even something as simple as what contains any of your code could be the problem.
UzumakiL answer was ok so my answer is based on his example.
I tried to fix it bootstrap way and found you need to add a col to center the header.
Try add col then center the header in there.
Something like that:
<div class="container-fluid">
<div class="row bg-dark">
<div class="col-12 text-center">
<p class="text-success"> Text Center</p>
</div>
</div>
</div>
jsfiddle solution
I am having trouble with aligning DIV tags. I am making a very basic page with Lightbox. In the old days, I would just make a table, align every cell vertically to the bottom, and move on. But trying to use DIV tags, having some trouble. When I do the code below, its pretty jumbled. 2 shorter DIV containers may align on one "row". Can someone point to me the best way to achieve this?
HTML CODE
<div id='wrapper' style='width:924px;>
<div style='float:left;width:308px;background-color:green'>
<a href='' title='title' rel='lightbox[10]' title=''>
<img src='' width='250px'>
</a>
<br/>
TITLE
</div>
<div style='float:left;width:308px;background-color:green'>
<a href='' title='title' rel='lightbox[10]' title=''>
<img src='' width='250px'>
</a>
<br/>
TITLE
</div>
<div style='float:left;width:308px;background-color:green'>
<a href='' title='title' rel='lightbox[10]' title=''>
<img src='' width='250px'>
</a>
<br/>
TITLE
</div>
...
</div>
Thanks!
See this fiddle. use a class instead of inline styles. I'm using inline-block here instead of float. the result is the divs are aligned at the bottom instead of the top. but be aware of whitespace in the code. see how I smashed your divs together. If there is whitespace a width of 33% is too much and will knock the third div down a line.The width of 33% is one third of the container so they each take up the same width.
What is the correct way to make the total area of a div a link?
I have multiple div's that are small tiles and I want the total area of the div to be a link.
Should the Anchor tag wrap a span on the inside or what is the best way to do this?
<div class="l-box">
<h3>Service 1</h3>
<p>Service description</p>
</div>
<div class="l-box">
<h3>Service 2</h3>
<p>Service description<</p>
</div>
Wrap your div with and give display: block; to a
I am making a WYSIWYG webpage editor: http://brokenmyriad.com/editor2.php, however I have come across a problem when trying to add image functionality.
Note: the image is not inside a contenteditable element, but is just a normal floated image.
The problem can be recreated by clicking into either the paragraph or the heading and the clicking the insert image button on the toolar (the far right button). (on the above linked page).
In standards based browsers it works as expected, and the heading and the paragraph are both to the right of the image, however in ie6 the paragraph is under the floated image like in this picture: http://tinypic.com/view.php?pic=2mfcfo8&s=3
My simplified code structure is as follows:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
</div>
<div>
<p>Click here to edit!</p>
</div>
What I want is for the <p> element to be alongside the floated image, and under the <h1> element as it is in standards based browsers.
Any help would be greatly appreciated!
Why is the paragraph in a separate div? Wouldn't the following work:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
<p>Click here to edit!</p>
</div>
If you must have the divs, then the second one needs to be nested
<div style="float: left;">
<img style='float:left'>
<h1>Click here to edit!</h1>
<div style="float: left;">
<p>Click here to edit!</p>
</div>
</div>
Your second div should be floated left:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
</div>
<div style="float:left;">
<p>Click here to edit!</p>
</div>
It turned out that the elements had width:100% on them, which was causing the error.