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;
}
Related
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>
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;
}
How do I put the smiley(yellow background) immediately after the centered word Peter(red background) in this example?
If you give .name the position: relative property, you can declare a pseudo-element for it, which is absolutely positioned.
.name:after {
position: absolute;
left: 100%;
background: yellow;
content: ': )'; /* the space is non-braking */
}
http://jsbin.com/urodit/20/edit
You should be able to do it with floats like this: http://jsbin.com/urodit/26/
Some googling of 3 column layouts may help you find ideas if this isn't exactly what you want too.
.toggle-me {
background-color: green;
float:left;
}
.name {
background-color: red;
float:left;
width:40px;
margin:auto;
}
.description {
background-color: yellow;
width: 20px;
float:left;
}
.container-one{
float:right;
width:100%;
}
.favourite-food {
background-color: orange;
float:left;
}
Check this http://jsbin.com/urodit/30/edit
Added .container-one { text-align: center; } and .name { display: inline-block; } to center the name. Then .description { display: inline-block; } to make it go after the name. Also removed .name { margin: auto; } because it's no longer necessary. And added .name { text-align: left; }.
Note the HTML comment after .name and before .description:
<div class="container-one">
<div class="toggle-me">|Toggle|</div>
<div class="name">Peter</div><!--
--><div class="description">: )</div>
</div>
This is to remove the white space between inline-block elements, caused by the line-breaks and indentation of the code itself. If you don't want to remove the white space just remove the HTML comment.
This is an ugly solution. It is not a nice solution since you need to fiddle with the width of the element that is floated on the right. You also need to put the element that will be on the right of your centered element before the centered element in your html.
If anyone is able to post a cleaner solution I will accept that answer instead of this one.
This is how i configured the divs in HTML
<div id="wrapper"><div id="content"><div id="details-middle" class="box">
..........content.........
</div></div></div>
And this the css for the div's
#wrapper {
border-radius: 12px;
font-size:13px;
line-height:140%;
width:1008px;
margin:0 auto;
margin-top: 15px;
margin-bottom:15px;
}
#content {
margin-left:20px;
width:1008px;
}
#details-middle
{
float:left;
width:700px;
}
.box {border: 1px solid #CCC;
border-radius:12px;
margin-bottom:7px;
padding:10px 12px;
background-color: #FFF;
}
Everything is showing out of the div's ..
You are floating details-middle, which means non floated elements will not make room for it, unless they themselves are floated, or you clear the float.
My preferred solution is to give the parent overflow: hidden; which will force the parent to make room for its floated children:
#content
{
margin-left:20px;
width:1008px;
overflow: hidden; /* change here */
}
Not exactly sure what you're wanting, there isn't a lot of description in regards to your question, but you need:
$('#details-middle').text();
to gather just the text from that DIV.
If you're not wanting to display children elements of the DIV, then refer to this answer I gave recently - it might be your scenario too:
jQuery pull out text inside div but not in p tag
I need to align multiple lines of text to the middle. Here is a rough guide of the markup I am working with.
<ul>
<li>
<a href='#'>This should be centered.</a>
<li>
</ul>
So as you can see from my image, the "work" link should be centered vertically. I have the width and height set with vertical-align: middle;. I know you need to set the line height for it to actually work but theres the problem. If I set the line height to 72px (the height of the element) then some of the links will stretch down the page due to them taking up two lines.
Is there a way of aligning multiple lines of text to the middle without using line-height?
Use display:table-cell; in your li element.
li {
width:200px;
height:200px;
vertical-align:middle;
display:table-cell;
}
This will give you this effect:
write like this
a{
display:inline-block;
vertical-align:middle;
}
& you can give display:table-cell; to it like this
li {
vertical-align:middle;
display:table-cell;
}
but it's not work in IE7 & below
I came up with this to handle vertically-aligned 100% height/width anchors inside containers:
http://jsfiddle.net/khaustic/KDfN6/
markup:
<div class="links one">
One
</div>
<div class="links two">
Two Two
</div>
css:
* {
/*ie box model forever!*/
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.links {
height: 5.0em;
text-align:center;
outline: 1px solid #333;
float:left;
margin: 0 1.0em;
overflow:hidden;
}
.links.one { width: 8em; }
.links.two { width: 4em; }
.links a {
width:10em;
text-align: center;
display: table-cell;
vertical-align:middle;
height: inherit;
}
You can try to change display to block for hyperlink and use paddings:
li a {display: block; padding: 30px 10px 30px 10px}