http://jsfiddle.net/z3Jue/20/
I cannot get all of my (inline-block) elements to align to the top of their container div.
I've tried these items in a list, floated left (but cannot center) and a lot of other random things but nothing seems to work.
Any help appreciated!
CSS
#buttons{
margin: 0 auto;
padding:0px;
border:1px dotted black;
height:60px;
}
.block img{
display:inline-block;
*display: inline;
zoom: 1;
height:60px;
width:40px;
border:0;
}
.block{
display:inline-block;
*display: inline;
zoom: 1;
border:1px solid red;
height:60px;
width:40px;
margin:0px;
padding:0px;
}
#search {
display:inline-block;
*display: inline;
zoom: 1;
height:60px;
width:240px;
border:1px solid red;
margin:0px;
padding:0px;
}
#searchTextForm{
font-size:16px;
width: 185px;
color:#333;
margin-top:3px;
border:1px dotted blue;
margin-top:15px;
}
HTML
<div id="buttons" align="center">
<div id="search" >
<form method="get" name="tipue" action="search/results.html" target="toolbarlongTOC" title="search">
<input type="text" id="searchTextForm" name="d" class="field" size="25" >
</form>
</div>
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">
<a href="#" id="bookmarks">
<img src="http://i.imgur.com/cbb92jF.jpg">
</a>
</div>
<div class="block">3</div>
Set .block {vertical-align: top}. Done.
http://jsfiddle.net/z3Jue/22/
Instead of height to your parent div you can use line-height and use vertical-align to the child blocks. See this demo: http://jsfiddle.net/z3Jue/25/
Related
I have created a bullseye logo using CSS and want to put a text aligned next to the logo.
#logo{
width:25px;
height:25px;
border-radius:50%;
background-color:red;
background-clip:content-box;
padding:5px;
border:5px solid red;
color:red;
}
<div id="logo" style="float:left;"><b ><span style="margin-left: 20px;p-bottom: -50px;"> text123</span></b></div>
You can use flexbox:
#container {
display: flex;
align-items: center
}
#logo{
width:25px;
height:25px;
border-radius:50%;
background-color:red;
background-clip:content-box;
padding:5px;
border:5px solid red;
color:red;
}
#text {
color: black;
padding-left: 12px
}
<div id="container">
<div id="logo"></div>
<div id="text">text123</div>
</div>
using css+html only create a click to expand tabs??
This example will show you how to go about doing this:
body {
display: block;
}
.span3:focus ~ .alert {
display: none;
}
.span2:focus ~ .alert {
display: block;
}
.table{
width:400px;
height:200px;
margin:50px auto;
}
.alert{
width:100%;
height:40px;
background:#e74c3c;
text-align:center;
line-height:40px;
color:#fff;
border-bottom:1px solid #fff;
display:none;
}
.row{
width:100%;
height:40px;
background:#e74c3c;
text-align:center;
line-height:40px;
color:#fff;
border-bottom:1px solid #fff;
}
.span3, .span2{
padding:5px 7px;
border:2px solid #e74c3c;
color:#e74c3c;
cursor:pointer;
}
<div class="table">
<span class="span3" tabindex="0">Hide Me</span>
<span class="span2" tabindex="0">Show Me</span>
<br><br>
<div class="row">
#1
</div>
<div class="row">
#2
</div>
<div class="alert">
#3
</div>
</div>
Here's a fiddle: http://jsfiddle.net/6W7XD/6618/
Hello guys I have a small form within a div I have already centered it but the img with it can't be center properly with it its always kinda on top or in the bottom i want the h4/form/img to appear as if they are on one line here is the code:
.outer {
display:block;
width:1140px;
margin:0 auto;
}
.inner {
text-align:center;
display:block;
}
body {
background:#dee
}
form {
margin:0px;
display:inline;
margin-top:10px;
}
img {
display:inline;
}
h4 {
display:inline;
margin:0px;
margin-top:10px;
}
HTML:
<div class="outer">
<div class="inner">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="zip-icon.png">
</div>
</div>
http://jsfiddle.net/mohamedkna/djhL2z27/
Thanks in advance
You need to set vertical-align to img:
img {vertical-align: middle}
http://jsfiddle.net/djhL2z27/4/
Try like this: Demo
CSS:
form {
margin:0px;
display:inline-block;
line-height:40px;
vertical-align:middle;
}
img {
display:inline;
line-height:40px;
vertical-align:middle;
}
Add vertical-align: middle to the img and form. That should more or less do the job. The rest fine tuning u can do.
Try using align attribute:
<div class="outer">
<div class="inner" align="center">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="zip-icon.png">
</div>
You have problem here:
.outer {
display:block;
width:1140px;
margin:0 auto;
}
Change to this:
.outer {
text-align:center !important;
display:block;
width:100%;
margin:0 auto;
}
.outer {
text-align:center !important;
display:block;
width:100%;
margin:0 auto;
}
.inner {
text-align:center
display:block;
}
body {
background:#dee
}
form {
margin:0px;
display:inline;
margin-top:10px;
}
img {
display:inline;
}
h4 {
display:inline;
margin:0px;
margin-top:10px;
}
<div class="outer">
<div class="inner">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="http://i.imgur.com/O9fPYk5.png">
</div>
</div>
Please update css. All content will be in center as you need
function useless() {
alert(hello);
}
.outer {
display:block;
max-width:1140px;
margin:0 auto;
}
.inner {
text-align:center;
}
body {
background:#dee
}
form {
margin:0px;
display:inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
}
img {
display:inline-block;
vertical-align: middle;
}
h4 {
display:inline-block;
vertical-align: middle;
margin:0px;
}
<div class="outer">
<div class="inner">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="http://i.imgur.com/O9fPYk5.png">
</div>
</div>
A different way is to use negative margin (not good for ie <8)
img {
margin-bottom:-15px;
display:inline;
}
I have used my custom framework for responsive.
In mobile view less than (768px resolution) textbox is breaking my container. It goes oustside the container and not considering the container padding.
Here is my html:
<div class="container">
<div class="col-3">
<input type="text" />
</div>
<div class="col-3">
<input type="text" />
</div>
<div class="col-3">
<input type="text" />
</div>
</div>
Here is the CSS :
* { margin:0px; padding:0px; }
.container { width:1170px; margin:0px auto; }
.col-3 { float:left; width:30%; margin-right:3%; background:#CCC; }
input { border:0px none; background:#333; height:30px; line-height:30px; width:100%; color:#FFF; padding:0px 10px; }
#media (max-width:767px)
{
.container { width:auto; padding:0px 10px; }
.col-3 { float:none; width:100%; margin-bottom:10px }
}
FIDDLE LINK
You have to just use box-sizing: border-box; in your input CSS file.
So your code will be:
<div class="container">
<div class="col-3">
<input type="text" />
</div>
<div class="col-3">
<input type="text" />
</div>
<div class="col-3">
<input type="text" />
</div>
</div>
CSS :
* { margin:0px; padding:0px; }
.container { width:1170px; margin:0px auto; }
.col-3 { float:left; width:30%; margin-right:3%; background:#CCC; }
input { border:0px none; background:#333; height:30px; line-height:30px; width:100%; color:#FFF; padding:0px 10px; box-sizing: border-box; }
#media (max-width:767px)
{
.container { width:auto; padding:0px 10px; }
.col-3 { float:none; width:100%; margin-bottom:10px }
}
Your input width is currently 100% + padding making it more than 100% of it's parent. To prevent this you need to change the box-sizing property to border-box from the default content-box:
input {
box-sizing: border-box;
}
Edited Fiddle
FURTHER READING
I am trying to place some text inside an image, but the text div is not coming on top of the image, rather it is hidden and invisible right below the image. thanks in advance!
Here is a link to jsfiddle:
http://jsfiddle.net/XrXZj/1/
have the following in my css file:
.spotlight {
color:#FFFFFF;
display:table;
height:120px;
margin-bottom:15px;
margin-left:0px;
overflow:hidden;
padding:0 50px;
position:relative;
width:840px;
}
.spotlight .wrapper {
position:absolute;
}
.spotlight .middle {
display:table-cell;
height:50px;
vertical-align:middle;
}
.spotlight .spotlight-copy {
font-size:15px;
line-height:25px;
width:500px;
}
and here is the content of html file:
<div class="spotlight">
<img src="<spring:url value="/assets/img/banner-natural-hazard-risk.jpg"/>" border="0" />
<div class="wrapper">
<div class="middle">
<div class="spotlight-copy">
<spring:message code="content.location.title" />
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
.spotlight .wrapper {
position:absolute;
top: 0;
}
I put there a solution http://jsfiddle.net/NPh76/
HTML is:
<div class="wrapper">
<div class="middle">
<div class="spotlight">
<img src="http://www.springsource.org/files/header/logo-spring-103x60.png" border="0" />
<div class="spotlight-copy">
message in spotlight copy
</div>
</div>
</div>
<div style="clear: both;"></div>
notice about HTML:
<IMG> is into .middle to be at same level as .spotlight-copy
CSS is:
.spotlight {
color:#FFFFFF;
display:table;
height:120px;
margin-bottom:15px;
margin-left:0px;
overflow:hidden;
padding:0 50px;
position:absolute;
width:840px;
}
.spotlight .wrapper {
position:absolute;
}
.spotlight .middle {
display:table-cell;
height:50px;
vertical-align:middle;
}
.spotlight .spotlight-copy {
position:absolute;
top: 0px;
font-size:15px;
line-height:25px;
width:500px;
color:#FF0000;
}
notice about CSS
position:absolute; in .spotlight-copy
top: 0px; for position
color:#FF0000; to see something ;)