My text have only 1 line and my picture will fit the container height. I want text and picture to align center vertically. I try margin top text class with negative value and position relative but nothing work what I really want.
jsfriddle here
HTML
<div id="friend_select">
<div class="Friend">
<img class="Picture" src="http://graph.facebook.com/harell/picture?type=square&width=80&height=80" />
<span class="Name">First Name Last Name 1</span>
</div>
<div class="Friend">
<img class="Picture" src="http://graph.facebook.com/harell/picture?type=square&width=80&height=80" />
<span class="Name">First Name Last Name 2</span>
</div>
</div>
CSS
#friend_select{ padding: 5px; width: 400px; height: 500px; }
.Friend{ height: 80px; }
.Friend .Name{ line-height: 80px; }
.Friend .Picture{ line-height: 80px; width: 80px; height: 80px; }
I propose this fix:
.Friend .Name{ line-height: 80px; vertical-align:top; }
Live demo here: http://jsfiddle.net/keaukraine/WNT7U/
Works in latest Firefox, Chrome and IE down to IE8. For IE7, apply this hack:
.Friend .Name { *zoom:1; }
Related
I'm trying to make a design that utilizes white space.
I have an image that I want on a white background. I have a class that has a white background, and the image itself (which also has a white background as part of the image). I'm having an issue where I can't ensure that the div class is the same height as the image itself if I have both be responsive.
I've tried adding a second image with the same height as the initial image that is just white space, setting the div to be responsive, and a bunch of other things, but I'm not sure what the best way to do this would be. The page itself is up at http://jamieaurora.com/devinTribute.html to get an idea of what I'm going for (though the code is a bit out of date than what I'm posting here). If anyone could point me in the right direction, it'd be greatly appreciated. I cut out the portions of the code that I don't feel are relevant, but if you would like to take a look at the full HTML file, it is located in this hastebin. Thank you so much!
https://hastebin.com/tifiqaciri.xml
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.responsive
{
width: 100%;
height: auto;
}
.hero-section
{
background-color: white;
font-family: Oswald;
letter-spacing: 4px;
top: 0;
height: 64%;
width: auto;
padding-top: 5%;
padding-bottom: 1%;
}
</style>
<body>
<nav>
<ul id='navbar' style="z-index:0;">
<li><a class = "active" href="index.html">Home</a></li>
</ul>
</nav>
<section class="hero-section" id="hero-section">
<div class = "container-fluid">
<div class = "row">
<div class="col-xs-6">
<img src = "images/devin-townsend-evermore.jpg" class="responsive" ></img>
</div>
<div class="col-xs-6">
<h1 style="padding-left: 62%" class="responsive">Title Text</h1>
<h2 style = "padding-left: 60%; font-size: 140%; align: left;" class="responsive">Paragraph Text</h2>
</div>
</div>
</div>
</section>
I had a parent div container with two main components side-by-side. I had an image on the right that was responsive. I wanted the text on the left side to stay in the centre and to the left of the image as it changed size depending on the browser's screen size.
I set the parent's container height to the same size as the image in its original form but in em.
Using a combination of height: auto and max-height: 100% worked for me.
The return in my React Component was:
<div className="videoAndDescription">
<div className="left33">
<div className="textToSquare">
<h1>Firewood, delivered...</h1>
</div>
</div>
<div className="right66">
<img src={stoveburning} />
</div>
</div>
My CSS:
.videoAndDescription{
display: flex;
flex-direction: row;
background-color: red;
height: 40em;
}
.left33{
color: orange;
display: flex;
justify-content: center;
align-content: center;
width: 60%;
}
.left33 .textToSquare{
height: auto;
background-color: black;
}
.right66{
width: 40%;
}
.right66 img{
max-height: 100%;
}
I'm trying to center 4 divs inside a bigger div with equal margin between them, and it doesn't seem to work.
I've looked at other answers and tried margin: 0 auto but it didn't work for me.
here's the HTML:
<div id="footer_frame">
mail#gmail.com
<span id="phone">044-1234567</span>
<div id="footer_icons">
<div class="icon_div">
<img src="images/youtube.png" alt="Watch our work at our YouTube page" class="icon" />
<p>YouTube</p>
</div>
<div class="icon_div">
<img src="images/email.png" alt="Contact us" class="icon" />
<p>Email</p>
</div>
<div class="icon_div">
<img src="images/googleplus.png" alt="Join our circle # Google+" class="icon" />
<p>Google+</p>
</div>
<div class="icon_div">
<img src="images/facebook.png" alt="Join our Facebook page" class="icon" />
<p>Facebook</p>
</div>
</div>
And the CSS:
#footer_frame {
position: absolute;
background-color: rgba(0,0,0,0.8);
width: 25%;
height: 16%;
top: 83%;
left: 37.5%;
}
#footer_icons {
width: 90%;
clear:both;
margin-top:12%;
}
#footer_icons .icon_div {
display: inline-block;
text-align: center;
font-size: 0.9em;
color: white;
}
#footer_icons .icon_div p {
margin: 0.2em;
}
Now it looks like this, but what I want is that the 4 icons will be centered inside the black div.
Thanks.
Wrap all four inner divs with a single DIV and then set a fixed width and use margin: 0 auto on that one.
When I do things like this I try to use flexboxes as often as possible. The above answer works perfectly but I just thought you might want to try these two options out.
#footerIcons{ display: inline-flex;} .iconDiv{ display: -webkit-flexbox;
-webkit-flex-pack: center;
-webkit-flex-align: center;
}
This should work. For more info visit this link. Before you try to use flexbox in your code make sure you have a ll the right vendor prefixes.
I have this header bar.
<div id="header">
<div class="container">
<img src="img/logo.png"/>
<div id="searchBar">
<input type="text" />
</div>
<div class="buttonsHolder">
<div class="button orange inline" id="myAccount">
My Account
</div>
<div class="button red inline" id="basket">
Basket (2)
</div>
</div>
</div>
</div>
I need the searchBar to fill whatever the remaining gap is in the div. How would I do this?
Here's my CSS
#header {
background-color: #323C3E;
width:100%;
}
.button {
padding:22px;
}
.orange {
background-color: #FF5A0B;
}
.red {
background-color: #FF0000;
}
.inline {
display:inline;
}
#searchBar {
background-color: #FFF2BC;
}
Use calc!
https://jsbin.com/wehixalome/edit?html,css,output
HTML:
<div class="left">
100 px wide!
</div><!-- Notice there isn't a space between the divs! *see edit for alternative* --><div class="right">
Fills width!
</div>
CSS:
.left {
display: inline-block;
width: 100px;
background: red;
color: white;
}
.right {
display: inline-block;
width: calc(100% - 100px);
background: blue;
color: white;
}
Update: As an alternative to not having a space between the divs you can set font-size: 0 on the outer element.
You can realize this layout using CSS table-cells.
Modify your HTML slightly as follows:
<div id="header">
<div class="container">
<div class="logoBar">
<img src="http://placehold.it/50x40" />
</div>
<div id="searchBar">
<input type="text" />
</div>
<div class="button orange" id="myAccount">My Account</div>
<div class="button red" id="basket">Basket (2)</div>
</div>
</div>
Just remove the wrapper element around the two .button elements.
Apply the following CSS:
#header {
background-color: #323C3E;
width:100%;
}
.container {
display: table;
width: 100%;
}
.logoBar, #searchBar, .button {
display: table-cell;
vertical-align: middle;
width: auto;
}
.logoBar img {
display: block;
}
#searchBar {
background-color: #FFF2BC;
width: 90%;
padding: 0 50px 0 10px;
}
#searchBar input {
width: 100%;
}
.button {
white-space: nowrap;
padding:22px;
}
Apply display: table to .container and give it 100% width.
For .logoBar, #searchBar, .button, apply display: table-cell.
For the #searchBar, set the width to 90%, which force all the other elements to compute a shrink-to-fit width and the search bar will expand to fill in the rest of the space.
Use text-align and vertical-align in the table cells as needed.
See demo at: http://jsfiddle.net/audetwebdesign/zWXQt/
I know its quite late to answer this, but I guess it will help anyone ahead.
Well using CSS3 FlexBox. It can be acheived.
Make you header as display:flex and divide its entire width into 3 parts. In the first part I have placed the logo, the searchbar in second part and buttons container in last part.
apply justify-content: space-between to the header container and flex-grow:1 to the searchbar.
That's it. The sample code is below.
#header {
background-color: #323C3E;
justify-content: space-between;
display: flex;
}
#searchBar, img{
align-self: center;
}
#searchBar{
flex-grow:1;
background-color: orange;
padding: 10px;
}
#searchBar input {
width: 100%;
}
.button {
padding: 22px;
}
.buttonsHolder{
display:flex;
}
<div id="header" class="d-flex justify-content-between">
<img src="img/logo.png" />
<div id="searchBar">
<input type="text" />
</div>
<div class="buttonsHolder">
<div class="button orange inline" id="myAccount">
My Account
</div>
<div class="button red inline" id="basket">
Basket (2)
</div>
</div>
</div>
This can be achieved by wrapping the image and search bar in their own container and floating the image to the left with a specific width.
This takes the image out of the "flow" which means that any items rendered in normal flow will not adjust their positioning to take account of this.
To make the "in flow" searchBar appear correctly positioned to the right of the image you give it a left padding equal to the width of the image plus a gutter.
The effect is to make the image a fixed width while the rest of the container block is fluidly filled up by the search bar.
<div class="container">
<img src="img/logo.png"/>
<div id="searchBar">
<input type="text" />
</div>
</div>
and the css
.container {
width: 100%;
}
.container img {
width: 50px;
float: left;
}
.searchBar {
padding-left: 60px;
}
in css:
width: -webkit-fill-available
I would probably do something along the lines of
<div id='search-logo-bar'><input type='text'/></div>
with css
div#search-logo-bar {
padding-left:10%;
background:#333 url(logo.png) no-repeat left center;
background-size:10%;
}
input[type='text'] {
display:block;
width:100%;
}
DEMO
http://jsfiddle.net/5MHnt/
Include your image in the searchBar div, it will do the task for you
<div id="searchBar">
<img src="img/logo.png" />
<input type="text" />
</div>
I did a quick experiment after looking at a number of potential solutions all over the place. This is what I ended up with:
http://jsbin.com/hapelawake
I am trying to create a form with multiple rows. Each row has an optional input field followed by a mandatory button. The buttons should line up vertically - something like this:
_____________ _______________
| input 1 | | button 1 |
|___________| |_____________|
_______________
| button 2 |
|_____________|
I tried to float the button left with a fixed left margin, but doing so moves the input field to the right of the button - even though the input field appears first in the markup:
<div>
<input type="text">
<button>Action 1</button>
</div>
Please see my jsfiddle here. Why is this happening and what's the correct solution?
You need thee div container to do this as shown in this jsFiddle.
HTML Code
<div class="container">
<div class="left">
<button>
</div>
<div class="right">
<button>
</div>
</div>
CSS Code
.container {
width: 190px;
height: 22px;
margin: 0;
}
.left {
float: left;
width: 95px;
height: 22px;
}
.right {
float: right;
width: 95px;
height: 22px;
}
Use rows.
<div class="row-rap">
<div class="right">
<input type="text">
</div>
<div class="left">
<input type="button" value="Action 1">
</div>
</div>
<div class="row-rap">
<div class="right">
<input type="text">
</div>
<div class="left">
<input type="button" value="Action 2">
</div>
</div>
With the following styling.
div.row-rap {
width: 100%;
}
div.row-rap .right, div.row-rap .left {
width: 50%;
float: left;
}
Here's an alternative, the margins and colors may need modification. See jsfiddle link for sample result.
It has a left-aligned label and right-aligned input (button style) in a div, for each line. The non-breaking space is needed as a placeholder in the span element that represents an "empty label".
http://jsfiddle.net/qallar/kfgCb/5/
The html is:
<div class='line'>
<span class='formlabel'>label 1</span>
<input class='formbutton' type='button' value='button 1 text ' />
</div>
<div class='line'>
<span class='formlabel'> </span>
<input class='formbutton' type='button' value='button 2 text' />
</div>
and the css:
.line
{
display: block;
background-color: #ddd; /* also try #fff */
margin: 0px;
padding: 2px;
height: 30px;
width: 200px;
}
.formlabel
{
float: left;
background-color: #eee; /* also try #fff */
margin: 0px;
padding: 2px;
width: 75px;
height: 100%;
clear: both;
}
.formbutton
{
float: right;
background-color: #0f0;
margin: 0px;
padding: 0px;
width: 100px;
height: 100%;
}
The input field is flying to the right of the button because it is an inline element. Float works on block elements only, inline elements will always flow around the floated elements. This explains the behavior in the original jsFiddle.
Having said that, even if I put display:block on the input element it still behaves like inline. I was able to make the basic concept work for a div though, which is a true block element. See the jsFiddle here.
<div class="row">
<button>Action 1</button>
<div class="in"></div>
</div>
.row {
clear: both;
}
.in {
background-color: green;
height: 24px;
width: 100px;
}
button {
float: left;
margin-left: 110px;
width: 150px;
}
The only workaround seems to be the one offered by Musa (see this jsFiddle) where he aligns the buttons to the right using text-align and limiting the width of the div.
I am not a CSS expert and usually this task works for me using table
<table>
<tr><td>Optional Input</td><td>Button</td></tr>
<tr><td>Optional Input</td><td>Button</td></tr>
</table>
if table by some reason is not an option you can use div/span
<div style="display: table-row">
<span style="display: table-cell">Optional Input</span>
<span style="display: table-cell">Button</span>
</div>
It will about like this
using Block formatting context https://developer.mozilla.org/en-US/docs/CSS/Block_formatting_context
jsfiddle code: http://jsfiddle.net/EeNFH/9/
the html code:
<div class="inp">
<input type="text">
</div>
<div class="btns">
<p><button>Action 1</button></p>
<p><button>Action 2</button></p>
</div>
and the styles:
input {
width: 100px;
}
button {
width: 150px;
}
.inp{
float:left;
}
.btns{
overflow:hidden;
}
I have an image and some text. I want to center both of them vertically in <div>.
How can I do this while NOT changing anything in the <img> tag?
I know lots of people suggest the following:
<div>
<img style="vertical-align:middle; height: 30px;" src ="image.png"/>
<span style="line-height: 30px;" > my text </span>
</div>
Because of some reasons, I do not want to change anything in the <img> tag. Can I center both of them by only adding styles in <div> or <span> or other places?
By the way, I also know that some people said the following would work:
<div>
<img height=30px; src ="image.png"/>
<span style="line-height: 30px;" > my text </span>
</div>
But it is not working for me. So any ideas?
Thanks.
Try this - http://jsfiddle.net/J4QJA/
div {
height: 300px;
background: beige;
line-height: 300px;
}
img {
vertical-align: middle;
}
...
UPDATE
In case you can't/don't want to apply ANY styles to the <img> you can use a wrapper - http://jsfiddle.net/J4QJA/3/
HTML
<div class="wrapper">
<div class="image-wrapper">
<img src="http://lorempixel.com/200/100" />
</div>
<div class="image-wrapper">
Lorem ipsum doloe sit amet
</div>
</div>
CSS
div.wrapper {
height: 300px;
background: beige;
}
div.image-wrapper {
display: block;
position: relative;
top: 50%;
margin-top: -50px; /* half of your image height */
line-height: 100px;
width: 200px;
float: left;
}