I have the following:
<td rowspan="3"; class="outer"; color="green"><div class"inner"></div></td>
CSS:
.in{
text-align:center;
-webkit-border-radius:8em;
font-size:25px;
height:120px;
width:120px;
vertical-align:middle;
}
td{
text-align:center;
padding:0px;
height:100%;
overflow:hidden;
I am trying to produce a circle inside a div which is inside the td. I dynamically (ajax) add text (a number) to the div. So essentially I want a Circle with a number in the centre. The problem is that the text is always at the top of the circle and not in the centre.
Help appreciated, thanks.
Try adding line-height:120px; to your .in class
Related
I'm trying to show a text in a border div located in absolute location inside another div.
Option 1 with width:auto; - fiddle: https://jsfiddle.net/c21kt6r4/
The problem is that the left side box expands too much.
Option 2 - with width:min-content; fiddle: https://jsfiddle.net/ay159rw6/2/
The problem is that the right side box text wraps.
What is the clean way to wrap text in div and show a correct border in both multi and single line texts?
For reference the html is :
<div class="main">
<div class="item" style="left:0;">
<label>SHAMPOO & CONDITIONER</label>
</div>
<div class="item" style="left:165px;">
<label>WHAT EVER</label>
</div>
</div>
And CSS:
.main{
position:relative;
border:solid black 1px;
width:400px;
height:400px;
}
.item{
border:solid blue 1px;
width:160px;
height:150px;
position: absolute;
}
.item label{
position:absolute;
bottom:5%;
left:5%;
border:solid red 1px;
padding:5px;
display:inline-block;
font-size:12px;
width:min-content;
}
Follow these steps.
1) You need to warp the label inside a div and then give it position:absolute. Also you need to use right:5% to give spacing on both lefr-right sides. We're wrapping into a div because we want position relative to div we're applying table cell property.
2) You need to display: table-cell; your label tag .item label
3) Give word-break: break-all; your label tag .item label so word can take whole space
Here is the working demo: https://jsfiddle.net/o5dgzn0c/
Demo image.
Hope it will help!
I would suggest you going with max-width here, because it will limit max width of the item element to some value and keep possibility to include width:auto feature width for all elements less than it, something like:
.item label{
position:absolute;
bottom:5%;
left:5%;
border:solid red 1px;
padding:5px;
display:inline-block;
font-size:12px;
width:auto;
max-width:100px;
}
However, I would go with JS approach on this, as you have no idea what text might appear.
I'm having trouble getting margins to work on an image. I have an image, and it has the following CSS:
#logoRedrum{
position:relative;
width:50px;
margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}
The HTML for the image is as follows:
<img id="logoRedrum" src="resources/img/logoRedrum.png">
What I'm trying to do with this is to have my image centered at all times. Instead of having it centered, it is doing this:
The red backwards "R" with the blue outline is my image. I have googled several times what might be causing the image to stay on the left, but to no avail.
All help greatly appreciated!
Add display:block; to img
#logoRedrum{
position:relative;
width:50px;
display:block;
margin:0 auto
}
DEMO
If you need to center the image in the main parent its easy, do it like this
//HTML
<div class="centered-content"> <img class="no-margin" src=""/> </div>
//CSS
.contered-content {
text-align:center;
}
.no-margin{
margin:0 auto;
}
I am trying to wrap an image with some adjacent text, and i can align it to top-left and top-right using align="" attribute or float. But how can i align image to the vertical and horizontal center of whole text after wrapping.
Like this:
I have tried below code,
<p>
<img align="middle" src="http://placehold.it/140x100" /> Some More text Here....
</p>
You won't be able to do it with a single block of text (I can't think of a single instance where it's aesthetically pleasing and functionally desirable, but I'd love to be proved wrong), but you can with two columns. There's a great article on it here:
http://alistapart.com/article/crosscolumn
Essentially, you use pseudo-elements to create an empty space that is the same size as the image, then position the image onto that space.
Solution 1
Fiddle 1 for the image shown in the question:
CSS:
html, body
{
height: 100%;
width:100%;
margin:0;
padding:0;
}
#main{
width:100%;
text-align:justify;
margin:0;
padding:0;
}
.class1{
position:absolute;
}
#child1{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
text-align:justify;
margin:0;
padding:0;
background:url(http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
Solution 2
If you want to wrap the text around the only way to do it is using float.See this Fiddle 2
CSS:
.class1 img{
float:left;
}
Solution 3
But the above solution will not allow you to center the image.For centering image you will have to do
some trick like this Fiddle 3 . But this will require large amount of effort to adjust writing between the two columns/divs.
I have a div with some text and another div with some hidden buttons behind the text div and move to the left when needed (anitmation).
The problem is that the text inside div is moved to the right to let the buttons div not overlap with the text.
Check here:
http://clip2net.com/s/2JYBV
How to make text of main text div not interact depending of the the width/size/position of the button div?
.a {
position:relative;
width:400px;
height:300px;
margin:50px 200px;
background:#000;
padding:10px;
color:#fff;
}
.b {
position:absolute;
top:10px;
left:0px;
width:180px;
height:290px;
background:green;
display:none;
}
.a:hover .b {
display:block;
/* left:-150px; */
}
You can use relative and absolute positioning of divs to fulfill your required task.
http://jsfiddle.net/G9Q25/
try giving a z-index to your button div
z-index:2;
Try adding the following to your definition:
overflow:hidden;
I have a div container with height:auto, this I assume would increase the height depending on the contents. However I have another div right after this first div, with height:auto it will overlap the current div.
div.footer{
position:relative;
width:1010px;
height:50px;
margin-top:auto;
margin-left:auto;
margin-right:auto;
border:1px solid gray;
font-family:Helvetica;
}
This is my current css for the bottom div. How do I make it appear at the end of the first div, instead of overlapping?
The first div:
div.mainbody5{
position:relative;
margin-top:20px;
width:1010px;
height:auto;
margin-left:auto;
margin-right:auto;
border:1px solid gray;
font-family:Helvetica;
}
They're not overlapping on jsfiddle for me, but I can still help you out. Just add this right after the first div:
<br style="clear:both;" />
This should add the space you're looking for between them.
This also keeps them centered on the page. ;)