I have this Demo, where i tried to align image (90X90px), Label and a selectbox to be placed properly (in same line). Image is aligned top whereas label & selectbox aligned at the bottom.
So far i tried to place everything in inline-block; float.. etc. but everything fails. What i want is i want to place everything horizontally center and vertically middle with only divisions. Can any one suggest me how to do this?
HTML:
<div class="center">
<div class="search-wrapper">
<img src="images/obj.png" width="40" height="40" class="search_img_txt"/>
<h2>Lorem ipsum</h2>
<select>
<option value="am">1</option>
<option value="am">2</option>
</select>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
You just need to add following css in your code
.search-wrapper img{
display: inline-block;
vertical-align: middle;
}
Check the updated Demo
Related
i am trying to place a transparent div over a background image. over this transparent div there is blue color div which has drop down list and icons right aligned and some caption. it's been a day and i tried different method to achieve this by giving background image to a container, using jumbotron, finally trying carousel, i want to align the contents now,
current look:
my page:
<div class="container">
// some code for nav bar and logo etc
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="~/img/backimage.jpg" alt="Chania">
<div class="container">
<div class="carousel-caption">
<div class="row" id="ddselect">
<div class="col-md-6">
<select name="connames">
<option value="America">America</option>
<option value="UK">UK</option>
<option value="China">China</option>
<option value="India">India</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
custom css:
.carousel .carousel-inner .item .container .carousel-caption #ddselect, .carousel .carousel-inner .item .container .carousel-caption #ddselect{
background-color:#fff;
opacity: 0.7;
border: 2px solid;
border-radius: 5px;
padding-right: 800px;
padding-bottom: 250px;
}
expected output:
you can see complete view in imageur here
i am just learning how to do custom alignment in bootstrap. any help would be great.
stom, The code will show how you can get a div with a transparent background and place the dropdown in the div. All on top of the image in the carousel.
Here is the Fiddle.
I think this is what you are wanting to do.
<div class="item active">
<img src="http://img1.goodfon.su/original/1920x1080/b/b3/soty-pchela-med-fon-nasekomoe.jpg" alt="First slide image">
<div class="col-md-6 v-center borders">
<div>
<select name="connames" class="bg-select">
<option value="America">America</option>
<option value="UK">UK</option>
<option value="China">China</option>
<option value="India">India</option>
</select>
</div>
<h3>Some Text Here</h3>
<p>ASome more text here.</p>
</div>
</div>
Added to this post
Do do these other other things you mentioned.
What I have added to the code to show you how to re position the transparent div, make the drop down a transparent background color, have the div height responsive etc.
All background color options are all transparent.
I show 2 options for ways to re position the div over the image.
1 of these options you can set the width using Bootstrap col-md-X.
The other option you can adjust the class width:40%;in the css.
One thing you now need to do.
Because the div over the image is responsive (width/height) you just need to set up some media breakpoints to adjust your font size for the text you plan to put inside these divs and adjust the % value for the div height at each breakpoint.
Because the carousel is responsive re the height as well as the width, this is why you need to control the text size and the div height too. As you will see when you resize the window.
This should give you a really good starting point from here.
Here is the new Fiddle with theses new changes.
I have 3 divs, an image div, a text div and another image div
http://jsfiddle.net/m02pw4wk/4/
<div id="1" style="display:inline-block; width:100px">
<span style="margin:0;">Center<span>
</div>
I want to center the span text in its parent div
I tried vertical-align on the text but no success, also I see that there is a small margin, ou padding below the text, where is it coming from ?
Any pointing on the solution would be helpful
Cheers
You need to change the vertical-align property for the img element - not the text. It's worth noting that the default value for this property is baseline, thus the image element is aligned to the baseline of the text. Values such as top/bottom/middle will change this behavior.
Updated Example
img { vertical-align: middle; }
It's also worth noting that ids are suppose to be unique.
<div id="userbox" style="float:right; background-color:grey;display:table;">
<div id="1" style="display:inline-block">
<img src="http://www.dev2one.com/excel2web/demo/images/user_pic2.png" />
</div>
<div id="1" style="display:inline-block; width:100px;display:table-cell;vertical-align:middle;">
<span style="margin:0;">Center<span>
</div>
<div id="1" style="display:inline-block">
<img src="http://www.dev2one.com/excel2web/demo/images/cross.png" />
</div>
</div>
In my header div, I need to have 2 objects floating to the right, one is a button and the other is a search field.
Both of them is in a div called "pull-right" which just make them float right.
The objects are in these order (from the left to the right)
Searchbox
Button
However since both of them obviously float right, the first element in the code are going to win and take the spot on the right.
So I've placed the button before the searchbox, even though that the searchbox actually comes first. But it's still works.
Is it considered a sloppy way to do it?
Here's the HTML:
<div id="navbar">
<div id="navbar-inner" class="clearfix">
<div class="pull-right">
Sign in
</div>
<div class="pull-right">
<form><input type="search" id="search" placeholder="Search"></form>
</div>
</div>
</div>
and the CSS:
.pull-right {
float: right;
}
You could easily wrap this in another container, and float that one to the right.
HTML:
<div id="floatingContainer">
<input type="text" value="Input" />
<input type="submit" value="submit" />
</div>
CSS:
#floatingContainer { float:right; }
JSFiddle example.
So I have a tab menu,
SO i.e.
And once clicking on the tabs the content for that tab display with a white background matching the tab. The problem in IE7 is that the content for the tab does get displayed but the content goes outside my tab div and into the background. This only happens in IE7.
The content mark up is as follows
<div class="tabContentRow">
<div class="tabContentImageLeft" style="DISPLAY: inline">
<a href="" target="_blank">
<img width="110" height="110" alt="Video" src="~/?w=110&h=110&as=1" /> </a>
</div>
<div class="tabContentCopyRight" style="DISPLAY: inline">
<h2>video</h2>
<p>Text here.</p>
</div>
</div>
And the problem has to do with my two divs
<div class="tabContentImageLeft" style="DISPLAY: inline">
<div class="tabContentCopyRight" style="DISPLAY: inline">
If I dont put the content within these two divs then even IE7 it stays nicely within my tab div. But if I put it the tab div doesnt drop down and it just blends into the background.
.tabContentImageLeft {float: left; width: 130px; text-align: center;}
.tabContentCopyRight {float: left; width: 575px;}
Add a clear div at the bottom of your tabContentRow. Your elements are floating and therefor taken out of the DOM flow.
<div class="tabContentRow">
.....Inner tab markup
<div class="clear-fix" style="clear:both;display:block;"></div>
</div>
This question is related to another question I asked
Basically, I have 2 horizontally aligned divs. Both sit inside a div called ".Parent", so the structure is like this:
<div class="Parent">
<div style="float:right">
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div style="float:left">
<span>dest list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div style="clear:both; font-size:1px;"></div>
</div>
The problem is that the Parent div exists inside a another div called #main. #main has a white background that frames all of my content.
Before I added the floats to the divs inside .Parent, everything was fine because the containing Div pushed the white background down to the right size. But now that the divs are floating, they don't push #main's white background down.
Can anyone suggest how to get the #main to recognise the size it's supposed to strech down to? Should I approach this differently?
Thanks
Dave
Give your #main overflow:hidden; and optionall clear:both;
Actually, they ARE behaving correctly and parent divs are never to expand to contain floated elements. As shown by other answers, you can Google for "clear floats" for more explanations and examples of how to do this.