Let's say I have this code
<div id="content1" width="400px" height="100px">
<input type="text" id="znamkyInput">
</div>
<div id="content2" width="400px" height="100px">
<input type="text" id="znamkyInput">
</div>
And I want the input to be vertically centered into the center of the div. How can I do that?
Just try this. And look at the demo
#content1 {
text-align: center;
}
The original html is incorrect and the div's height and width should be supplied in css (or using the style attribute).
To align in the center vertically and horizontally:
#content1 {
width: 400px;
height: 100px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
As there are two of these divs immediately next to each other then table-cell will cause them to sit adjacent to each-other, on the same line. I would either wrap each in another div (not a great solution) or place a br tag between them (or some other content).
If the intention is to have several of the divs immediately next to, and below, each-other then I would consider using a table.
Use display:inline-block on the child elements and use text-align:center on the parent. That should do the trick
<div id="content1" style="text-align:center" width="400px" height="100px">
<input type="text" style="display:inline-block" id="znamkyInput">
</div>
Just try the following,
<div id="content1" width="400px" height="100px">
<input type="text" style="display:inherit" id="znamkyInput">
</div>
Try this:
HTML:
<div id="content1">
<div>
<input type="text" id="znamkyInput"/>
</div>
</div>
CSS :
#content1
{
background-color: gray;
width:400px;
heigth:100px;
}
#content1 div
{
margin-left: auto;
margin-right: auto;
width: 158px; /*width of your input box*/
}
Working Example
Related
My work seems like above. The width of left one (img) and right one (button) is fixed, and that of middle one (textarea) should be flexible.
It has to work like max-width property is given to it.
When the size of the window shrinks, the size of the textarea should also be shrunk.
But max-width property doesn't work well in this case.
When the size of the window reaches the length of A, width of the textarea should be start shrinking, but it doesn't.
Instead, it starts shrinking when the width of the window reaches the length of B.
Below shows what happens when the window shrinks.
What should I do for this problem with css? Or do I need to use javascript?
html
<div id="div_target">
<p>
<img src="~~~"/>
</p>
<p>
<textarea id="target" cols="40"></textarea>
</p>
<p>
<input type="submit" value="등록"/>
</p>
</div>
css
#div_target{
width:60%;
}
#target{
max-width:60%;
}
If I understand correctly your problem is shrinking the width of textarea in the small size devices.
Try below structure:
<div class="col-xs-12 target">
<div >
<img src="~~~"/>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="submit" value="등록"/>
</div>
</div>
.target{
text-align: center;
display: inline-block;
}
textarea{
width: 60%;
}
I believe you want to have the element inline in the "md" and "lg" so you can define:
display: inline-block;
for the elements in the large devices.
Here's one method using CSS flexbox:
#div_target{
display: flex;
width: 60%;
}
#div_target > * {
margin: 5px;
}
<div id="div_target">
<img src="http://placekitten.com/g/50/50">
<textarea id="target" cols="40"></textarea>
<input type="submit" value="등록" />
</div>
jsFiddle
.target{
text-align: center;
display:block;
}
textarea{
width: 60%;
}
<div class="col-xs-12 target">
<div >
<img src="http://orig05.deviantart.net/8ac4/f/2011/297/5/6/hammer_bro__by_yoshigo99-d4duynn.png"style="width:50px;height:50px;"/>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="submit" value="등록"/>
</div>
</div>
I have 3 images that I want to align vertically however I can't seem to get it working properly. My images are split into 3 parts from 1 existing image. You can see slight transitions from one image to the other. What am I missing here?
HTML:
<div id="Wrapper" class="Wrapper">
<div id ="image-1">
<img id="top" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/top.png" class="jscolor border="0">
</div>
<div id ="image-2">
<img id="mid" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/mid.png" class="jscolor border="0">
</div>
<div id ="image-3">
<img id="bot" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/bot.png" class="jscolor border="0">
</div>
</div>
JS Fiddle: https://jsfiddle.net/krvrp7eb/
Why this happens?
img is an inline element and inline elements flows like text. The small whitespace is due to this. Possible solutions:
Change the display from inline to other - add display: block for instance
Change the vertical-align property to top (default is baseline)
Shrink the text size to 0 by font-size: 0 on the containing block of the inline element.
Example
Add vertical-align: top to all the three images - see updated fiddle here and snippet below:
#image-1 img,
#image-2 img,
#image-3 img {
background-color: #00f;
vertical-align: top;
}
.image-1,
.image-2,
image-3 {
display: block;
}
.Wrapper {
vertical-align: middle;
display: block;
}
<div id="Wrapper" class="Wrapper">
<div id="image-1">
<img id="top" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/top.png" class="jscolor" border="0">
</div>
<div id="image-2">
<img id="mid" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/mid.png " class="jscolor" border="0">
</div>
<div id="image-3">
<img id="bot " src="http://www.crystalcave.nl/wp-content/themes/shop-isle/bot.png " class="jscolor" border="0">
</div>
</div>
Add the following to your CSS:
.Wrapper {
font-size:0;
}
JSFIDDLE
just add one css property in this
image-1 img, #image-2 img, #image-3 img
to
float: left;
use position: relative; and use top, bottom left, and right to adjust its position.
What I need to do is a bit complicated to explain, but I'll do my best. I need to fit 3 different divs in one page, but my left div needs to have more space than the others, so aligning side by side is impractical, as is one on top of each other. I need one bigger div on the left, and the other two stacked on top of each other on the right. But I can't merge these two divs into one and float it. Because I need the top one to be vertically aligned on top of the left one, and the bottom one vertically aligned on bottom of the left one, while these 2 (top and bottom) need to be aligned on their right. Not sure if I was able to explain, so here is an image illustrating what I want to accomplish:
So, you see, left one taking most of the space, smaller ones aligned on top and bottom, while also aligned on their right side, and a blank space between then. Here's the code I already have:
<div style="display: inline-block;">
<h3>Left Div</h3>
<input type="text" name="name">
<input class="button" type="submit">
</div>
<div style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
<h3>Top right div</h3>
<input type="text" name="name2">
</div>
<div style="display: inline-block; vertical-align: bottom; width: auto; padding-left: 20px;">
<h3>Bottom right div</h3>
<input type="text" name="name3">
<input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>
I'd also like to say that in the middle of the way (when I only had 2 divs) it was working the way I wanted to, the problem arose when I added the third div, so I think that's where the problem is at. Please note that I'm new to html, I'm sorry if this is just a simple fix.
I think the key is the equal height part, which you can use CSS3 flexbox to solve it. For the right side top / bottom divs, you can wrap the two divs into another div. See the simple demo below.
jsFiddle
div {
border: 1px solid aqua;
}
.container {
display: flex;
}
.left, .right {
flex: 1;
}
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<div class="container">
<div class="left">
<h3>Left Div</h3>
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="right">
<div>
<h3>Top right div</h3>
</div>
<div>
<h3>Bottom right div</h3>
</div>
</div>
</div>
this is just the way you want it to be.... as the images..
<html>
<head>
<style>
#i{
background-color:"red";
width:700px;
height:600px;
float:left;
}
#a{
background-color:"black";
width:600px;
height:300px;
float:right;
position:relative;
display:inline;
}
#b{
background-color:"blue";
width:600px;
height:250px;
float:right;
margin-top:50px;
position:relative;
display:inline;
}
</style>
</head>
<body>
<div id = "i">
<p>hello</p>
</div>
<div id = "a">
<p>hello</p>
</div>
<div id = "b">
<p>hello</p>
</div>
</body>
</html>
One way is to use negative margin. The inline-block element is what's making it difficult to have multiple divs on the same vertical axis, because both are lining up with the larger div. This works for what you're asking:
<div id = "left" style="display: inline-block;">
<h3>Left Div</h3>
<input type="text" name="name">
<input class="button" type="submit">
</div>
<div id = "top-right" style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
<h3>Top right div</h3>
<input type="text" name="name2">
</div>
<div id = "bottom-right" style="display: inline-block; vertical-align: bottom; margin-left: -182px">
<h3>Bottom right div</h3>
<input type="text" name="name3" >
<input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>
fiddle: https://jsfiddle.net/an9ra3mb/2/
I'm newbie with HTML and CSS. I'm struggling with (horizontal) element alignement and I would appreciate any help provided.
This is what I got so far:
http://jsfiddle.net/vayacondios2015/umpk0xht/
HTML
<div class="mainbody">
<h2>This is uppercase title</h2>
<div class="right">
Link1
Link2
</div>
<div class="left">
<form>
<label for="textarea">This is a comment about textarea</label><br>
<textarea rows="10" cols="80" placeholder="Example" autofocus required></textarea><br>
<label for="textarea"><span>Note</span>: You can only use <span>this</span> word in textarea!</label><br>
<input type="submit" value="Send"><br><br>
</form>
</div>
<div class="middle">
Link3
<select><option>Select1</option></select>
<select><option>Select2</option></select><br><br>
</div>
</div>
<div class="mainbody">
TOP
<img> Home<br>
©Company
</div>
CSS in a link jsfiddle above (couldn't attach it properly).
This is how I would like it to be:
http://i.stack.imgur.com/VCWcL.jpg + centered on the page.
I'm looking forward for HTML semantic correction also, if you have some extra time and will.
Try these css. I will help you check this link https://jsfiddle.net/35sgma83/
.middle {
text-align: center;
}
div.mainbody {
text-align: center;
}
I would highly recommend getting to grips with HTML and CSS. I won't add specific links as there are thousands upon thousands of excellent resources all over the web.
However to help you I have modified the HTML so it's a little more structured:
<div class="mainbody">
<h2>This is uppercase title</h2>
<div class="right">
Link1
Link2
</div>
<div class="left">
<form>
<label for="textarea" class="form-label">This is a comment about textarea</label><br>
<textarea rows="10" cols="80" placeholder="Example" autofocus required></textarea>
<span class="note"><strong>Note</strong>: You can only use <strong>this</strong> word in textarea!</span><br>
<input type="submit" value="Send" class="submit"><br><br>
</form>
</div>
<div class="middle">
Link3
<select><option>Select1</option></select>
<select><option>Select2</option></select><br><br>
</div>
</div>
<div class="mainbody">
TOP
<img> Home<br>
©Company
</div>
You'll notice that the text area has a class, the note that appears under it also has been put into a span. I felt it better to use the <strong> tag when highlighting the bold text. You could go one step further and add a class in your CSS just for bold text. That will allow for re-usability.
I altered the CSS so that the container div which has .mainbody has the text aligned in the center. The rest of the changes are:
div.mainbody
{
text-align: center;
}
div.mainbody h2{
text-transform: uppercase;
text-align: center;
}
div div.right{
text-align: right;
float: right;
}
div div.left form label{
text-align: left;
}
.form-label, .note
{
float: left;
}
textarea {
width: 100%;
}
.submit {
clear: both;
display: block;
}
I think that satisfies your picture. Check out the fiddle here: http://jsfiddle.net/phyjauhc/1/
HTML semantic correction
Can be done via the w3c Markup Validation Service
Add below css
div.middle {
text-align: center;
}
div.ft_body {
text-align: center;
}
And change bottom div class name to ft_body and update cols="80" to cols="100%" for textarea
I am working on a photo gallery, each thumbnail is in its own DIV and floated to the left in a containing DIV. It has been displaying properly up until vertical thumbnails entered the equation. Now, when the next row should start, the first item of the following row is to the left of the last vertical DIV (thumbnail), rather than flush to the left of the containing DIV.
alt text http://tapp-essexvfd.org/images/capture1.jpg
Here is the CSS:
#galleryBox {
width: 650px;
background: #fff;
margin: auto;
padding: 10px;
text-align: center;
overflow: auto;
}
.item {
display: block;
margin: 10px;
padding: 20px 5px 5px 5px;
float: left;
background: url('/images/content_bottom.png') repeat-x scroll bottom #828282;
}
and the HTML:
<div id="galleryBox" class="ui-corner-all">
<div id="file" class="ui-corner-all">
<form name="uploadPhoto" id="uploadPhoto" method="post" action="" enctype="multipart/form-data">
<p><label for="photo">Photo:</label><input type="file" name="photo" id="photo"/></p>
<p><label for="caption">Caption: <small>Optional</small></label><input type="text" id="caption" name="caption"/></p>
<p align="center"><input type="submit" value="Upload" name="send" id="send" class="addButton ui-state-default ui-corner-all"/></p>
</form>
<a name="thumbs"></a>
</div>
<div class="item ui-corner-all">
<a href="http://tapp-essexvfd.org/gallery/photos/201004211802.jpg" class="lightbox" title="test1">
<img src="http://tapp-essexvfd.org/gallery/photos/thumbs/201004211802_thumb.jpg" alt="test1"/></a><br/>
<p><span class="label">test1</span></p>
</div>
<div class="item ui-corner-all">
<a href="http://tapp-essexvfd.org/gallery/photos/201004211803.jpg" class="lightbox" title="test3">
<img src="http://tapp-essexvfd.org/gallery/photos/thumbs/201004211803_thumb.jpg" alt="test3"/></a><br/>
<p><span class="label">test3</span></p>
</div>
</div>
You can use Inline-Blocks as described in this article:
The Inline-Block Thumbnail Gallery
The article solves the same exact problem you are having with thumbnails.
I also found this simple example using inline-block thumbnails. Note how the thumbnails wrap nicely and remain vertically aligned within their line.
UPDATE:
Here is another detailed article that tackles this problem with the inline-block:
Cross-Browser Inline-Block
As you can notice from these articles, it is a bit tricky to make it work cross-browser.
Two options:
Set a maximum height for the thumbnail DIVs, so that they layout correctly, regardless of whether they are horizontal or vertical.
Use "clear: left" to reset the float on the thumbnail DIV next to the vertical.
The default behavior appears correct, based on what happens when text flows around a floated DIV. Based on what you're trying to do, I would choose option #1.
you could try using css table displays for your divs...
ie.
#galleryBox {
display: table;
...
}
.item {
display: table-cell;
...
}
.row {
display: table-row;
}
so you'd have to add another div to wrap around the items in each row
<div id="galleryBox">
<div class="row">
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
</div>
<div class="row">
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
</div>
</div>