<span> is only aligning horizontally but not vertically inside <div>
CSS:
.upload-cont{
cursor:pointer;
margin-left:130px;
display:inline-block;
border:2px dashed #a8a8a8;
max-width:220px;
max-height:180px;
min-width:220px;
min-height:180px;
}
.add-text{
display:block;
font-size:10px;
font-weight:bold;
color:#999;
word-wrap:break-word;
text-align:center;
width:100px;
margin:auto;
vertical-align:middle;
}
HTML:
<div class="upload-cont">
<span class="add-text">Something</span>
</div>
What should i do to align the <span> vertically that is at the middle of <div>?
Check this jsfiddle: http://jsfiddle.net/xdYUs/1/
Try this: http://jsfiddle.net/xdYUs/2/
Use position:relative; to the container and position:absolute; to the span element. As I've seen, your container has fixed width and height. You can use that by setting the top and left properties of the span element
Try this...
.add-text{
display:block;
font-size:10px;
font-weight:bold;
color:#999;
text-align:center;
width:100px;
margin: 40% auto;
}
jsFiddle Example
Greetings...
.add-text
{
display:block;
font-size:10px;
font-weight:bold;
color:#999;
word-wrap:break-word;
text-align:center;
width:100px;
margin:auto;
vertical-align:middle;
line-height:170px;
}
line-height => 180px (container) - 10px (font size) = 170px
Related
Is it possible to place button on the vertical end of the boostrap card? Cards are filling automatically with empty space to remain all with the same height, but how to place a button at the end of the card no matter on height of the specific card?
You can simply add the button to the card footer (card-footer class in Bootstrap) and style the footer background color and border so that visually it seems as a part of card body.
check this out:
Codepen
.card {
border-radius: 10px !important;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
}
.card-header {
border-radius: 10px 10px 0 0 !important;
background-color: #FCCF23 !important;
}
.card-footer {
border-radius: 0 0 10px 10px !important;
background-color: white !important;
border: 0 !important;
}
.card-footer p {
display: none;
}
.card-footer button {
color: #FCCF23;
background-color: #52134B;
font-weight: 500;
border: 0;
border-radius: 5px;
padding: 8px 15px;
transition: all .5s;
}
.card-footer button:hover {
color: #52134B;
background-color: #FCCF23;
transition: all .5;
}
/*delete the following codes to make footer totally invisible*/
.card-footer {
border-top: dashed 2px rgba(0,0,0,.05) !important;
}
.card-footer p {
display: block;
color: rgba(0,0,0,.1);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card b-0 w-50 m-5 text-center">
<h4 class="card-header border-0 p-4">I am a Bootstrap Card Header</h4>
<p class="card-body p-4">I am a Bootstrap card Body. You can add as many texts as you want here, yet, the button will be remained at the bottom of the card!</p>
<div class="card-footer pt-0 pb-4 px-4">
<p class="my-2">I am an 'invisible' Bootstrap Card Footer</p>
<button type="submit">hover me!</button>
</div>
</div>
I want to make children sortable inside parent on x-axis. It works but during moving an element rest of them changes their paddings or margins, i.e. they go bellow the active element.
<div id='parent'>
<div class='tagup'>EARTH</div>
<div class='tagup'>SUN</div>
<div class='tagup'>MOON</div>
<div class='tagup'>VENUS</div>
</div>
CSS
#parent{
padding:5px 10px;
background:lightgreen;
}
.tagup{
display:inline-block;
background:darkblue;
color:white;
text-align:center;
border-radius:5px;
cursor:pointer;
padding:1px 5px;
margin:3px;
}
JS
$('#parent').sortable({
axis: "x",
containment: 'parent',
tolerance: "pointer",
});
Here is an EXAMPLE
How to keep them in one line during dragging?
g
Sortable sets contaner's height. Let's set height auto of tagup.
.tagup{
display:inline-block;
height:auto !important; //Add this line
background:darkblue;
color:white;
text-align:center;
border-radius:5px;
cursor:pointer;
padding:1px 5px;
margin:3px;
}
I am trying to have two divs (red boxes) side by side, and within each red box should be a bordered link.
One link is on two lines whereas the second link is on one line.
The links should lie at the center (horizontally and vertically) of each box, and the two boxes should also be perfectly aligned.
My code is the following. I had to set the links as "display: table-cell;" to keep the two boxes aligned. If you have another solution, i'm listening ^^.
* {
margin: 0;
padding: 0;
}
#marketing-button, #prints-button {
background-color: red;
text-align: center;
width: 10em;
height: 10em;
display: inline-block;
}
#marketing-link, #prints-link {
color: white;
vertical-align: middle;
display: table-cell;
float: none;
font-size: 1em;
border: yellow solid 2px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: .2em;
}
<body>
<div id="container">
<div id="marketing-button">
<a id="marketing-link" href="#">Digital <br />marketing</a>
</div>
<div id="prints-button">
<a id="prints-link" href="#">Prints</a>
</div>
</div>
</body>
Thanks guys!
Ok, i found the solution.
Each link should be set to display as inline-block and should be contained within a div displayed as a table-cell.
This allows to center the link vertically.
The table-cells should themselves be contained within divs displayed as inline-blocks. This allows the red boxes to be aligned and to have a space between them.
Here is the final code:
* {
margin: 0;
padding: 0;
}
.container {
display: inline-block;
}
#marketing-button, #prints-button {
background-color: red;
text-align: center;
width: 10em;
height: 10em;
display: table-cell;
vertical-align: middle;
margin-right: 20px;
}
#marketing-link, #prints-link {
color: white;
display: inline-block;
float: none;
font-size: 1em;
border: yellow solid 2px;
text-align: center;
padding: .2em;
}
<body>
<div class="container">
<div id="marketing-button">
<a id="marketing-link" href="#">Digital <br />marketing</a>
</div>
</div>
<div class="container">
<div id="prints-button">
<a id="prints-link" href="#">Prints</a>
</div>
</div>
</body>
let's i have the following code http://jsfiddle.net/QhJWt/
<span contentEditable="true">asdfasdf </span>
span
{
height:20px;
width:100px;
border: 1px solid black;
}
how can i emulate textbox behavior? i.e. when text longer then span width it doesnt resizing.
Add display:block to your span element, because inline elements ignore width and height properties. Then, add word-wrap: break-word;, to get the desired behavior.
Also, change height to min-height, so that the element resizes when necessary.Fiddle: http://jsfiddle.net/QhJWt/1/
span
{
min-height:20px;
width:100px;
display: block;
border: 1px solid black;
word-wrap: break-word;
}
It's simple actually:
span
{
height:20px;
width:100px;
border: 1px solid black;
display:block;
overflow:hidden;
}
I have a problem with a div that at the begin is fixed in the bottom-left corner. I need to do it draggable but when I use jquery to do it the bottom position remains and the size of the div changes.
You can see the behavior in this page: http://paraguasparados.com
The div css code is:
.fcp-cpanel{
position:fixed;
bottom:20px;
left:10px;
z-index: 99999;
padding: 5px;
color: #000;
text-align: left;
font-size: 11px;
background:url('../img/blueicons/background.jpg') repeat-x;
border:1px solid #000;
}
The jquery code is:
$jn("#fcp-cpanel").draggable({
containment:"body",
scroll: false,
opacity: 0.35
});
When in firebug I remove the 'bottom' css style it works like it should.
Thanks for any help.
The easiest solution to this is to add a width and height to your fixed draggable <div> to stop it from resizing on drag.
The problem is that you are making a fixed element draggable and so the bottom css attribute is messing it up when you start moving it. A fix for this is to create a container div that has the fixed css attributes and inside you can add the draggable element. Something like this:
css:
.fcp-cpanel-container{
position:fixed;
bottom: 10px;
left:10px;
}
.fcp-cpanel{
padding: 5px;
color: #000;
text-align: left;
font-size: 11px;
background:url('http://paraguasparados.com/modules/mod_friendchatppd/img/blueicons/background.jpg') repeat-x;
border:1px solid #000;
}
html:
<div class="fcp-cpanel-container">
<div class="draggable fcp-cpanel">
<p><b>Amigos Online</b>
<span id="onlusers" class="onlusers">0</span><span onclick="register()"><img title="Registrar" alt="Registrar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/visible.jpg"></span>
<span onclick="maximize()" id="fcp-micon">
<img title="Maximizar" alt="Maximizar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/max.jpeg">
<img style="display:none;" title="Minimizar" alt="Minimizar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/min.jpeg">
</span>
</p>
</div>
</div>
I set up a working example with your code here: http://jsfiddle.net/NdUNu/.
I tried this and it did what I wanted
$(function() {
$("#draggable").draggable({ containment: "window" });
});