The spec mentions that the vertical-display property (which only applies on inline and inline block elements ) aligns the element itself but not its content. A span, as i understand it is the element. In this fiddle everything works as expected but would need to be done in order to center the actual text "Beta" in the span?
https://jsfiddle.net/69uhamv5/
.b{
display:inline-block;
background-color:red;
height:120px;
vertical-align:middle;
}
<span class="b">Beta</span>
P.S: Im not looking for a quick solution, i am aware i can use line height or display table or a handful of other things. I am more intersted in figuring out exactly why it is that this doesnt work, or rather, why it is that it targets the span element but not the text inside and what would i need to to to target the text inside.
So, you have somme solution:
Variant 1 add line-height
.b{
background-color:red;
display: inline-block;
height:120px;
line-height: 7.5em;
}
try here: https://jsfiddle.net/69uhamv5/6/
Variant 2 center with table
.b, span {
display: table-cell;
vertical-align:middle;
}
.b {
background-color:red;
height:120px;
}
body{
display: table;
height:300px;
}
}
try here https://jsfiddle.net/69uhamv5/5/
Here is my approach :
.b{
background-color:red;
height:120px;
display: inline-flex;
align-items: center;
}
body{
height:300px;
}
}
<body>
<span >Alpha</span><span class="b">Beta</span><span>Gamma</span>
<script src="js/scripts.js"></script>
</body>
Related
HTML is not whitespace ignorant. For example,
<div>
<a class="test">A</a>
<a class="test">B</a>
<div>
with CSS
.test
{
display:inline-block;
min-width:100px;
background-color:#F00;
}
will result in a space between the two links. Is there any way to get rid of this (perhaps a CSS property of the wrapping div)?
Here you can find a lot of solutions :
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
To my mind, the best one is to use a display: block with float.
.test {
display: block;
float: left;
}
You can set the font-size of the parent to 0, but then you have to reset it on all children.
div {
font-size: 0;
}
.test {
font-size: 12px;
display:inline-block;
min-width:100px;
background-color:#F00;
}
I have a div in my app containing profile information like name, account #, and profile picture. For some reason the profile picture won't center even though I've tried the text-align:center trick. Here's my HTML:
<div id="profile-heading">
<img alt="6dbepurq" src="http://anymarket.s3.amazonaws.com/users/avatars/000/000/015/medium/6dBEpuRQ.jpeg?1406690559">
<h2>Tom Maxwell</h2>
<p id="school">University of California, Berkeley</p>
<p>User #15</p>
</div>
And the CSS for the #profile-heading div looks like this:
#profile-heading {
text-align:center;
margin-top:50px;
img{
border-radius:50%;
width:150px;
height:150px;
}
h2{
font-weight:800;
margin-bottom:5px;
}
}
Any idea?
img tag by default is inline-block and you must use text-align: center in parent container to align img tag horizontally.
In case of it's display property value has been changed to block you should set styles margin-left: auto; margin-right: auto; to center horizontally.
When I un-nested your styles everything worked in centering the image:
#profile-heading {
text-align:center;
margin-top:50px;
}
#profile-heading img {
border-radius:50%;
width:150px;
height:150px;
}
#profile-heading h2 {
font-weight:800;
margin-bottom:5px;
}
Nested are only for CSS pre-processors using SASS or LESS.
Another way to center things is with auto left and right margins: margin: 0 auto; Hope this helps!
Setting display property for img would do the trick:
#profile-heading {
text-align:center;
margin-top:50px;
img{
border-radius:50%;
width:150px;
height:150px;
display: inline-block; /* added this line */
}
h2{
font-weight:800;
margin-bottom:5px;
}
}
As <img> tag is not a block level element which means text-align property will not work as expected. You can do 2 things to solve this issue.
Either apply text-align: centeron parent element.
make the <img> tag a block level element using display: inline-block;.
You can see a DEMO here.
Here is My Demo
<span class="boxPrice ">
<p>Previous Bill</p>
</span>
I want to create <p> inside a <span>
should be vertically aligned center inside the <span>
You can add
display:inline-block;
to your p element.
Add line-height:75px; You need to make sure the line height is the same as the div height/
http://jsfiddle.net/H4yuE/1/
I would rather not use a block level element ("p") element within an inline level element ("span"). Use div instead.
There are several tricks on how to do this, the simplest is to modify line-height to match the height of your container:
.container {
width: 100px;
height: 100px;
line-height: 100px; /* Set it to the container height */
}
You can also use "display: table-cell" to achieve the same effect:
.container {
display: table-cell;
vertical-align: middle;
}
Block elements aren't "affected" by the vertical-align: middle, only inline elements...
I suggest changing the p to inline and adding the vertical-align: middle, like this:
.boxPrice p {
padding:0 !important;
margin:0 !important;
display: inline;
vertical-align:middle;
}
Fiddle
.boxPrice
{
width:160px; height:75px; border:1px #333 solid; text-align:center; display:inline-block;}
.boxPrice p{padding:20px !important; margin:0 !important}
.boxPrice:after{ display:inline-block; content:'';vertical-align:middle; height:100%}
JSFiddle: http://jsfiddle.net/wTtsV/7/
In the case of overflow in the example, the text is taken newline. How to hide the text instead of being taken newline? I already tried with overflow: hidden, it does not work.
I had success by adding table-layout:fixed to the table.
Then I added overflow:hidden; white-space:nowrap; to the table cell.
I had to adjust the width percentage due to the way table-layout:fixed renders tables.
#table{
display: table;
width: 100%;
table-layout:fixed;
}
#t2{
display: table-cell;
background-color: green;
width:80%;
white-space: nowrap;
overflow:hidden;
}
Working Example - jsFiddle
EDIT:
Here is another method using floated elements rather than display:table.
A minimum width is set on the container to prevent wrapping when the window is very small.
Caveat:
Granted, this is not perfect as you have to specify a min-width for the container.
If text in the left and right divs can vary unpredictably, it will be difficult to determine what min-width is appropriate to prevent wrapping.
<div id="container">
<div id="t1">some text</div>
<div id="t3">some other text</div>
<div id="t2">aaaaaaaaaa...</div>
</div>
#container {
min-width:200px;
width:100% !important;
width:200px;
}
#t1 {
float:left;
background-color: red;
}
#t2 {
background-color: green;
white-space:nowrap;
overflow:hidden;
}
#t3 {
float:right;
}
http://jsfiddle.net/wTtsV/26/
I am trying to create a simple html file with 2 column like structure. I managed it but there is no space between each element as you can see in the JSFiddled demo. I tried margin and padding but failed. How can I put some space between input elements for example?
JSFiddle
And here is my css:
.left
{
position:relative;
left:10px;
}
.right
{
position:fixed;
left:300px;
}
You could also use p elements to surround your label-field matches instead of using br line breaks, and would still be valid HTML.
For example:
<p>
<label for="foo">Foo:</label>
<textarea id="foo"></textarea>
</p>
Here's a fiddle.
Try this, but why are you using relative label and fix position for inputs?
.left {
display: inline-block;
left: 10px;
margin-bottom: 10px;
position: relative;
}
.left
{
position:relative;
left:10px;
width:300px;
float:left;
display:block;
}
.right
{
position:relative;
left:0px;
display:block;
}
This works fine with your jsfiddle. Tested it there. Add further margins if you need. The display:block does the trick
Try this using inline-block for this type of thing:
.left {
display: inline-block;
width: 300px;
margin-left: 0.6em;
}
label, input, select {
margin: 0.5em 0;
}