ive got some problem with my css styles:
I have different groups ( <div>'s ) that have subgroups displayed in ONE colum
or MULTIPLE ( max. 3) colums.
The problem i have is, that my vertical-align wont work within float elements with an 100% height.
within the subgroups: ST200 | Überblick... | EN DE should be displayed with vertical-align: middle
Maybe someone could help me.
complete code posted on jfiddle
http://jsfiddle.net/ZAa33/
Andres's comment here seems to address your problem: the line-height of the text is confining it to a smaller area than its container div.
To test, I changed the line-height property on .kursid to 35px, and the ST200 was successfully centered vertically, but only for those divs that had heights of 35px. For a more general solution, you could redesign your code to allow line-height and height to be set explicitly equal on all divs with text you want centered vertically, or you could see the other answers to that question for other options.
Vertical-Align Property works with only inline and inline-block elements. if you float any element, by default that element display property value is changed to block. In your case that is why vertical-alignment is not working on floated element. one solution for your problem is use inline.
[Inline-block demo](http://jsfiddle.net/Mostwanted_cJ/W8nf8)
Your JSFiddle is edited.
change all of your span to div and apply display:inline-block and vertical-align:middle
Inline-block demo
i found a solution to my Question that works pretty nice ;)
i just needed to set:
.kurs {
border-radius: 15px 15px 15px 15px;
background-color: #c5c5c5;
width: 100%;
min-height: 35px;
margin-bottom: 10px;
display: flex;
! display: -webkit-flex; <- remove
! display: -moz-box; <- remove
align-items: center; <- add
justify-content: center; <- add
}
The updated fiddle ;)
http://jsfiddle.net/ZAa33/9/
Related
Example: https://jsfiddle.net/notayam/4mLzus0y/
I set top-padding and bottom-padding to zero, and the layout display of the box model in the inspector shows 0 above and below, but as you can see from the jsfiddle there's still blank space there. And furthermore it's not centered vertically.
Adding vertical-align: middle !important; didn't help.
I got it centered vertically by trying different values for line-height, but that doesn't get rid of the unwanted padding above and below the text.
I dug out some older code that had a similar situation (using bootstrap) that I had muddled around with long enough to get it roughly like what I want. It used display: inline-block where this uses block. and although I have no idea if that might help I tried including display: inline-block !important; here. But it still shows up as block in the inspector; it shows both my css and spectre css specifying inline-block, but then block on the element. I couldn't figure out where that was coming from or why the override didn't work.
Tips on debugging CSS more efficiently would be very welcome. I really just need to get a table to display a whole bunch of data as compactly as possible, and would love to get that to work and never have to go near CSS ever again.
The rest of the app uses Python 3/Airium/Bottle, if that might matter. Running on Firefox 100.0.2 on MacOS 12.1. I'll only be running it locally so support for other browsers doesn't matter to me.
.btn {
padding-top: 0 !important;
padding-bottom: 0 !important;
height: unset !important;
}
I don't know if I understood what you want, but here is some solution:
.btn-group .btn {
padding-top: 0;
padding-bottom: 0;
/* This is to clear line height */
line-height: 1em;
display: flex;
flex-direction: column;
justify-content: center;
}
We can transform your buttons to flex boxes, so you then can control height, and have no vertical padding.
I put 3 divs into div with display:flex, expecting that it will fit all the space by the real content amount.
.flex {
display: flex;
padding: 10px;
}
The live exemple is here: http://plnkr.co/edit/rX3ykWgyTH65uIDHpIS1?p=preview
But in Chrome it seems that the result is not quite as I thought (just like in the table above):
.
Is it normal? If is then why?
The issue is caused by margin:auto 10px; that you have applied to your flex items (selector .pod > div).
Or to be more precise, it's caused by the vertical margin:auto - this is overriding the stretch effect of flex.
Change the margin to margin:10px and it will work.
I have 3 elements inline block with each other. The 2 smaller grids are flush with the bottom of the larger chart by default. How can I get them to be flush with the top of the larger chart instead. http://i.imgur.com/TAUG2rZ.png
I would prefer to not have to give an absolute position to each element, unless thats the only way.
all thats applied atm:
#smallgrid1, #largechart, #smallgrid2{
display: inline-block;}
Add vertical-align:top to css if you want to align them to top.
Other options for vertical-align which you may want are: middle, baseline, bottom etc.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#smallgrid1, #largechart, #smallgrid2{
display: inline-block;
vertical-align: top; }
If, by default, the elements don't end up aligning themselves towards the top, I would use the vertical-align property to position each of the inline-block elements to the top.
I've created a simple CodePen that demonstrates this more clearly. Notice how I style each of the div elements on the page:
div.element {
display: inline-block;
vertical-align: top; /* aligns each of the divs to the top of the container */
}
In this case, the element ids are arbitrarily named element1, element2, and element3, but you would probably name them smallgrid1, largechart, and smallgrid2 respectively.
Hi there you could try this
#smallgrid1, #largechart, #smallgrid2{
display: inline-block; vertical-align: top}
I have a text that I want in a specific color that says something about a text below it. I want that text to be centered so I use
margin: 0px auto;
But it doesnt position in the center and instead it gets positioned in the left of the screen. Simply put, whats the easiest and most effiecent way to center an element. ANY element.
text
text-align: center;
tags
margin: 0 auto;
other tags
left: 50%;
All methods are correct.
Keep in mind that text align do not have effect on inline level elements.
margin: auto is not a hack , it is perfectly relevant and correct according to the specification.For learning more about margin: auto see this link http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins
The best way to center text is
text-align: center;
If you use the margin: 0 auto; technique the element needs to be a block-level element or given display: block; and you need to give it a width (in px or %).
There are various techniques for centering elements. Usability of those techniques depends on other properties, inherited or you applied via css. For example, for centering an inline or inline-block level element, you may use text-align:center; to the parent. But for centering a block level element, you have to use a specific width along with margin:0 auto;. Certainly there have other techniques too.
I've a big problem!
You know, a div default width is 100% (of the parent). And if its content width is more than 100% (100%=1440px), div shows content in multiply lines.
Now, if i want, the div shows its content in one line, what should I do? look at the simple code::
<div>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
......(more than 100 other div, with unknown width)
</div>
NOTE: I don't know the content width.
I tried display: inline; and display: inline-block; and display: table;. they didn't work.
NOTE 2: I tried display: -moz-box;. It works, but Only in FIREFOX!
Thanks ...
The simplest way is to use white-space: nowrap on the parent, and display: inline-block on the children:
See: http://jsfiddle.net/4Yv83/
I also added overflow-x: auto, because presumably you don't want this.
Just tell the text inside the div not to wrap.
div {
white-space: nowrap;
}
a few years passed but ... I think it would be better to set overflow to hidden, because we don't need to show all of children elements at once. we use this kind of styling in thumb-slide like components. so I suggest to set "overflow:hidden" to parent element.
/* for parent element */
overflow: hidden;