I have a list of page titles that I want to display with a font awesome symbol next to them.
<div>
<ul class="form-navigation">
<li ng-repeat="..."
ng-click="...">
<div>
{{QuestionGroup.Title}}
<span class="pull-right fa fa-exclamation-triangle" style="color: red;"></span>
</div>
</li>
</ul>
</div>
I want the text to be centered vertically and the FA symbol to be centered horizontally and vertically. I've tried a range of different things with putting them in different divs and applying various styles but I can't get anything to work.
The symbol is the biggest issue, because I could centre it by adding padding at the top/bottom but because my page titles have random lengths they might take up more than 1 row causing the div to be a different size.
Use table to align them properly
<div>
<tr>
<td>
This is lol
<td>
<td>
<span class="fa fa-exclamation-triangle" style="color: red;"></span>
<td>
</tr>
</div>
Related
How can you align the text of an anchor vertically?
I may or may not know the number of lines, so line-height trick can't be relied upon.
Hierarchy is as so: nav ul li a in
<nav>
<ul>
<li>Hello</li>
</ul>
</nav>
Hello must be centered but cannot be wrapped.
The a elements have display: inline-block
Following the solution explained in this thread: How to get display:table-cell support in IE? any pure javascript or jQuery workaround?
You can add some additional code to the list, and adjust the height of the block with the height of the td:
<nav>
<ul>
<li>
<table>
<tr>
<td>
Hello
</td>
</tr>
</table>
</li>
</ul>
</nav>
You can see it working here: http://jsfiddle.net/G4kCz/4/
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.
I have a list of calendar events. The html looks like this:
<li data-id="1">
<a href="#calendar-item/1">
<div class="calendar" style="">
<div class="calendar-header"></div>
<div class="calendar-month">Dec</div>
<div class="calendar-day">11</div>
</div>
<p>Parents Association Non-Uniform Day</p>
<span class="chevron"></span>
</a>
</li>
I have given the list item padding, but it is ignoring the content of the div tag, see the image:
Here is the jsfiddle.
works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it
Try this my be slow your problem
CSS
give flot:left in below class
li p:nth-of-type(1) {float:left;}
And give flot:left in below class
li{float:left;}
What I'd expect from the HTML below is that I'd see woo1 and woo2 overlapping while hiiii remains in its own cell away from the woos. However, everything runs together. Why?
http://jsfiddle.net/T4Jgx/
<table>
<tr>
<td style="position:relative">
<span style="position:absolute">woo1</span>
<span style="position:absolute">woo2</span>
</td>
<td>
<span>hiiii</span>
</td>
</tr>
</table>
Edit: Weird. When I remove the style from woo2, it appears to work. When I remove it from woo1, woo2 overlaps hiiii. Da fu...?
Edit2: For Reconstruct, your comment has to do with tables, so how come the exact same effect can be reproduced with this?
<div>
<span style="position:relative">
<span style="position:absolute">woo1</span>
<span style="position:absolute">woo2</span>
</span>
<span>hiiii</span>
</div>
Edit3: Arrghh... I believe I understand what is happening. By adding absolute positioning to the two spans, they are removed from the control flow and the first TD is collapsed. I am thinking about deleting this question, but maybe someone can just confirm what I just said and get the answer?
Wrap your TD content in a DIV and transfer position:relative to that.
<td>
<div style="position:relative">
<span style="position:absolute">woo1</span>
<span style="position:absolute">woo2</span>
</div>
</td>
I want to wrap two spans in one line with CSS.
Here is my code:
<div style="width:60px;">
<span id="span1" style="float:left; display:inline;"></span>
<span id="span2" style="float:left; display:inline; "></span>
</div>
But it doesn't work.
How to do that?
Edit:
I want to use the "id", either use div or span, I just want them to be in one line.
When I just use span without style, the content are not in the same line. The second line will go down.
Here is the working example:
<div style="float:left;">
<span style="display:inline; color: red;">First Span</span>
<span style="display:inline; color: blue;">Second Span</span>
</div>
The float will mess things up. Usually with a float to work you need a width with it as well. It can't float them against each other because it doesn't know how much space each span will occupy in relation to the div. Spans are inherently inline elements unless you define them otherwise, so they should just display that way without the float.
<div style="float:left;">
<span style="display:contents; color: red;">First Span</span>
<span style="display:contents; color: blue;">Second Span</span>
</div>
'display:contents' Makes the container disappear, making the child elements children of the element the next level up in the DOM which I believe is the right answer.
Another way which works on ie too is this:
<div style="float:left; display:flex;">
<span style="color: red;">First Span</span>
<span style="color: blue;">Second Span</span>
</div>
In some cases display:inline does not work, in such case try adding both spans in one parent span like below
<span>
<span id="span1">Span 1</span>
<span id="span2">Span 2</span>
</span>
It's the float left that is causing it to be on separate lines. Maybe try a (non breaking space) in between the spans.
Overflow maybe?
<div style="width:60px; overflow:hidden;">
The float and display styles are mutually exclusive, so there's no point using them together. Also <span> defaults to display:inline; so that's redundant anyway (unless you have some other style elsewhere setting them to something else?).
You can use Table.
<table>
<tbody>
<tr>
<td><span>Span 1 text</span></td>
<td><span>Span 2 text</span></td>
</tr>
<tr>
<td><span>Span 3 text</span></td>
<td><span>Span 4 text</span></td>
</tr>
</tbody>
</table>