css is in index.html
When I click on column for sorting data, sort icon change her place.
The icon should stay at the same place.
https://stackblitz.com/edit/angular-jwppgq-qfu2jh
How can I fix the problem?
edit your css styling like this (set text-align: center for centering the text horizontal, with a fixed width and line-height for "centering" vertical in your case):
th[sortable].desc:before, th[sortable].asc:before {
content: 'a';
display: inline-block;
width: 22px;
height: 22px;
float: right;
margin-right: 10px;
text-align: center;
line-height: 1.2;
}
notice that you have to adjust this styling, if you change the font-size (line-height) or you set a icon-font or whatever instead of a normal letter.
Related
As you can see in my website: http://erdemcalikoglu.cf/ I have the menu on the top of the screen but my problem is: when I press the 2nd and the 4th button the conten is not centered. Can you help me with that please?I want this when I press the SERVICES button on menu
but it looks like this
Remove the padding left from .iletisim p, Corrected code below
.iletisim p {
position: absolute;
text-align: left;
color: white;
font-family: 'Lobster', cursive;
z-index: 1;
font-size: 30px;
color: #000;
text-align: center;
padding-left: 0px; }
try this
You did not provide enough info but by using Inspect Element, you need to add a width of 100% to your text or the container that it is in. Right now, it's centering the text in the provided width - which is dynamic upon your text. When you make the width 100%, it's setting the text container to fit the screen size 100%.
Add this to your CSS:
.servis p {
width: 100%;
}
I am trying to vertically align a div and an input:
<div id="a">
Button
</div>
<input type="text" id="b" placeholder="text">
They both share the same styles:
#a, #b{
box-sizing: border-box;
vertical-align: baseline;
padding: 0;
margin: 0;
outline: none;
font-size: 10px;
line-height: 10px;
font-family: serif;
border: none;
height: 30px;
width: 100px;
background: green;
display: inline-block;
border: none;
}
However, they are not vertically aligned:
Sample
How is that possible?
Please note: This is an abbreviated example from a bigger project where I have to use vertical-align: baseline. It is not possible to change that value and I do not want to use any hack like adding a margin-top. I want to understand why the vertical-align behaves this way and try to find a clean solution.
Since your height has a static value, you can use line-height: 30px; CSS property to force the alignment you want.
JSFiddle
Cumbersome explanation:
Your div's baseline is 10 px (see line-height property), while your element's height is 30 px. Text inside input element is vertically centered by default, baseline, in your case, 30px. So basically, browser tries to center elements by it's baseline, which is different for the elements, thus causing the first element, with a smaller baseline value, to be pushed down.
You need to add float: left to make it align on vertically.
Hi
On our website I have a page where there are Buy Now buttons
https://www.nutricentre.com/m-300-herbs-hands-healing.aspx
The styling that controls this is
.item .price {
color:#8c9c54;
font-size:14px;
font-weight: bold;
/*
position: absolute;
bottom: 48px;
left: 0px;
width: 150px;
*/
text-align: center;
margin-bottom: 45px;
}
.item a.blue_btn {
position: absolute;
bottom: 10px;
left: 15px;
cursor: pointer;
}
Any idea how I can get this aligned in a straight line regardless of the text above?
You don't have to change the css of the button, but from the whole item:
just add:
.item{
height: 380px;
}
Of course, you have to care about the maximum item-height: your value must not be less, or the price won't be visible anymore.
In this case, min-height would be the better alternative.
I would recommend setting a min-height: 370px; for the easiest solution.
You do not want to set a static height for this because if you have an item with a longer description it will not automatically add space but just cram everything in.
Add a static height to .item
height:375px;
The height:auto; declaration tells .item to expand as big as it needs to be to fit everything in, so the tops of the divs line up, but since they are different heights, the bottoms are staggered.
As some of my co-responders have noted, min-height is also an acceptable option, until you have an item with enough text that item expands past the min-height value, at which point they will begin to expand and stagger again.
This should point you in the right direction: http://jsfiddle.net/v9grm/
Create a grid and with the help of display: table make the columns the same height. Then place the button at the bottom of the column with position: absolute.
I'm making a tag-cloud-esque display of words, each contained within small divs, and floated so that many appear on each line. However, if I start changing the font size in some of the divs, the line structure gets broken up and huge gaps appear, as in this screenshot:
Can anyone offer any advice on how to resolve this? I'm not looking to do anything fancy, like having multiple lines of smaller tags alongside larger ones: I just want the divs to obey a normal looking line structure.
Here is the relevent css:
div.example {
background-color: #8C7D80;
padding: 2px;
margin: 2px;
float: left;
color: #96888B;
text-align: center;
position: relative;
}
Try upping the line-height.
The brackets seem too be too large, thus breaking the line.
div.example {
// other stuff here
line-height: 1.5
}
Is it possible you have set a fixed line-height?
I would suggest setting the height explicitly and/or changing the line-height property.
div.example {
background-color: #8C7D80;
padding: 2px;
margin: 2px;
float: left;
line-height: 25px;
height: 25px;
color: #96888B;
text-align: center;
position: relative;
}
<th>
My Heading
Sort Asc
</th>
I want to apply CSS to .sort-asc to replace the text "Sort Asc" with a custom 16x16 sort glyph image (/images/asc.png), placing the image directly to the right of the text. Is it possible?
NOTE: I can't change the markup. I can only apply styles; the following is my feeble attempt:
a.sort-asc {
float: left;
width: 16px;
height: 16px;
padding: 0;
margin: 5px;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url("/images/asc.png") no-repeat;
}
Currently, the image shows up all the way to the left of the table header cell. I need it to the right of the text "My Heading".
a.sort-asc {
width: 16px;
height: 16px;
padding: 0;
display:inline-block;
text-indent: 200px;
overflow: hidden;
background: url("/favicon.ico") no-repeat;
}
Removed float - you don't need it, it's on the right position. Text indent does nothing with inline, try inline-block: http://jsbin.com/abeme
Another hack is to add color: transparent, and a small size, but that too hacky.
If you remove the display block, you won't be able to set your width, height or use text-indent to hide the copy within the A. Try changing display:block to display:inline (since you're floating) instead - it may give you what you need.
Remove float and display:block for the text to appear next to the "My Heading" text.