I want the text in front of the image to be in the middle of it!
My problem is the vertical align middle is not working...
what is wrong?
<div class="comments">
<div class="pull-left lh-fix">
<img class=foto src="/$foto" class="imgborder">
</div>
<div class="comment-text pull-left">
<span class="pull-left color strong">anna:</span> dododod
</div>
</div>
.pull-left { float: left; }
.lh-fix { line-height: 0 !important; }
.comments {
position:relative;
display:block;
overflow:auto;
padding-left:15px;
padding-top:8px;
padding-bottom:8px;
border:1px solid #000;
}
.comment-text {
margin-left: 8px;
color: #333;
vertical-align:middle; //not working?
line-height:normal;
width: 85%;
text-align:left;
}
.foto{
width:50px;
height:50px;
float:left;
}
https://jsfiddle.net/a0bhv4n1/
Vertical-align works on inline elements. You are applying it to the class .comment-text which is for a div element. A div is a block style element which of course means that it will take up the entire space that it is allowed to, thus you cannot center something that already takes up the whole space. Inline elements only take up the space they need to based on the content in them and you can simply add display:inline-block to .comment-text to allow vertical-align:middle to work. More information can be found at MDN's article on vertical-align
Related
I'm trying to achieve some indent for content inside div. I want to have all elements inside to have 100% width, but first ones have to be positioned further from the left side. This demonstration shows what I exactly need:
I tried to mess around with ::before pseudoelement for parent div, different positioning and floating but no luck. Is there a way to achieve this in CSS or maybe jQuery?
Use the :nth-child pseudo class to select the items you want and then just give them a margin.
div{
border:1px solid #000;
padding:5px 10px;
}
p{
background:#000;
font-family:arial;
color:#fff;
margin:5px 0;
padding:5px;
}
p:nth-child(-n+2){
margin:5px 0 5px 50px;
}
<div>
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Fourth</p>
</div>
By the way, floating items and giving them a 100% width is somewhat redundant so I have omitted that from my code.
You don't need to add width:100% to your elements. If they are block elements it will take automatically 100% of the container width. Then just use marginto whatever element you need:
HTML:
<div class="container">
<div class="content margin"></div>
<div class="content margin"></div>
<div class="content"></div>
<div class="content"></div>
</div>
CSS:
body {margin:0; padding:0;}
.container {
width:400px;
padding:20px;
background-color:#ddd;
}
.content {
height:60px;
background-color:green;
margin-bottom:10px;
position:relative;
}
.margin {
margin-left:150px;
}
FIDDLE
I have a div with the following CSS:
.glyphicon-arrow-right {
font-size:25px;
margin-top:22.66%;
margin-left:5%;
color: #414141;
}
set inside a div with CSS
.forwardbutton {
width:60px;
height:60px;
border-radius:50%;
margin: 0 auto;
border: 1.75px solid #414141;
opacity: .3;
text-decoration:none;
}
When I resize on a computer screen, the arrow sits directly in the center. However, when I view the div on other devices (tablet, netbook/ phone) the arrow is not centered, with a height noticeable higher than it should be.
I was wondering if anyone could identify the issue. Thanks in advance.
EDIT: HTML
<a href="work.html">
<div class="forwardbutton">
<div class="front glyphicon glyphicon-arrow-right"></div>
</div>
</a>
when I make the div's(that contains the drop down menu)positioning to relative and the drop down menu div's positioning to absolute,it shows me only the last item on the drop down menu.if I set drop down menu container div to relative and leave the drop down menu div positioning,then it works.But that affects the rest of the page.So,how to set the positioning that would make the drop down works without affecting any other parts of the page.
HTML
<div id="top_head">
My Online Shop
<div id="nav">
<div class="test">Home</div>
<div class="test" id="product">Products
<div class="test1">shirt</div>
<div class="test1">Pant</div>
<div class="test1">inner</div>
<div class="test1">cap</div>
</div>
<div class="test">About</div>
<div class="test">contact Us</div>
</div>
</div>
CSS
body{
color:green;
}
#top_head{
width:100%;
height:100px;
font:48px Arial green;
border:1px dotted red;
}
#nav{
background-color:gray;
width:57%;
border-radius:5px;
font:28px Arial orange;
margin:0px -49px 5px 15px;
}
#nav a{
color:red;
text-decoration:none;
margin:0px 50px;
}
.test{
float:left;
}
.test:hover{
background-color:orange;
}
#product{
position:relative;
}
.test1{
position:absolute;
border:1px solid red;
visibility:hidden;
}
#product:hover .test1{
visibility:visible;
background-color:yellow;
}
I've tried with display property too. Same results.
If you have any idea where the problem lies, please help.
It looks like the issue here is that you're using position:absolute on all of the sub menu divs. This is essentially making them lay on top of each other (leaving the last one on top).
One solution for this is to wrap all of these elements in a container div and make that the thing that is hidden or shown:
Working Fiddle Demo
Your sub-menu becomes:
<div class="test1">
<div>shirt</div>
<div>Pant</div>
<div>inner</div>
<div>cap</div>
</div>
And the CSS is altered slightly:
.test1{
display:none;
}
.test1 div{
border:1px solid red;
}
#product:hover .test1{
position:absolute;
display: block;
background-color:yellow;
}
I am trying to create a sort of a window, formed by multiple divs. I'm basically putting div after div in my cshtml page, and trying to set their positions in the .css files.
After a considerable effort, I managed to set the divs in their beautiful positions. But as soon as I start to put text, or dom element or whatever inside one of those divs, it changes its position, and pushes other divs, creates a mess.
I somehow managed to keep some by using float, but it is really difficult. Isn't there an easy way to manage the inside elements of a div? Why does the inside elements cause the container div to travel to other places?
Here's the .html and .css code. The divs are empty and positioned correctly. You can simply write "qwe" inside div id="fiyat"> for example and see what I'm talking about.
.html code:
<div id="tablodetay">
<div id="secimler">
</div>
<div id="parcacerceve">
</div>
<div id="resim">
</div>
<div id="ebatsecimvefiyat">
<div id="ebatsecim">
</div>
<div id="fiyat">
</div>
</div>
<div id="urunozellik">
</div>
</div>
.css code:
div#tablodetay div#secimler
{
border:1px solid #000000;
margin:2px;
display:block;
width:706px;
height:100px;
display:block;
}
div#tablodetay div#parcacerceve
{
border:1px solid #000000;
margin:2px;
display:inline-block;
width:86px;
height:400px;
}
div#tablodetay div#resim
{
border:1px solid #000000;
margin:2px;
height:400px;
width:400px;
display:inline-block;
}
div#tablodetay div#ebatsecimvefiyat
{
margin:2px;
height:402px;
width:200px;
display:inline-block;
}
div#tablodetay div#ebatsecim
{
border:1px solid #000000;
height:248px;
width:200px;
margin-bottom:2px;
}
div#tablodetay div#ebatsecim form input
{
float:left;
border:1px solid #000000;
}
div#tablodetay div#fiyat
{
border:1px solid #000000;
height:148px;
width:200px;
}
div#tablodetay div#urunozellik
{
border:1px solid #000000;
height:120px;
width:706px;
margin-top:-2px;
margin-left:2px;
}
You need to define css attributes for each div. To prevent it from changing size or position you need
div ... {
position:absolute;
left: 50px;
top:50px;
width:100px;
height:50%;
}
position:absolute; ignores all other divs and puts your div on the spot you define.
width and height are overruled if the overflow isnt set to none or scroll
The browser will use your width and height as starting point, not end point.
You could also try to set max-width and max-height.
I'm using the technique in Stack Overflow question CSS centering text between two images but am unable to make the text center.
I would like the text "0 of 0" centered in this markup (as a fiddle):
HTML:
<div id="invoiceImageContainer">
<img src="http://i.imgur.com/8QT8u.png" id="invoiceImage">
<div id="invoiceNav">
<img title="Next" src="http://i.imgur.com/oZb7r.png" id="nextInvoice">
<img title="Previous" src="http://i.imgur.com/aKi11.png" id="prevInvoice">
<span id="invoiceCount">0 of 0</span>
</div>
</div>
CSS:
#invoiceImageContainer{
width:420px;
margin: 0 auto;
}
#invoiceImage {
height:600px;
}
#invoiceNav {
color:black;
font-size:10pt;
}
#prevInvoice {
float:left;
padding-left:100px;
}
#nextInvoice {
float:right;
padding-right:100px;
}
#invoiceCount {
text-align:center;
}
What am I doing wrong?
You are using a span for the text container which is an inline element. Therefore its width is the same as the width required for its content, changing it to a p (or changing display to block) will allow for horizontal centering. If you want to center vertically then set the line-height equal to the height of the images and set vertical-align: middle.
Updated fiddle: http://jsfiddle.net/W5jQd/3/.
Good old quick hack:
#invoiceImageContainer{
width:420px;
margin: 0 auto;
}
#invoiceImage {
height:600px;
}
#invoiceNav {
color:black;
font-size:10pt;
text-align:center;
}
#prevInvoice {
float:left;
padding-left:100px;
}
#nextInvoice {
float:right;
padding-right:100px;
}
#invoiceCount
{
line-height: 35px;
}
In your original markup you had #invoiceCount set to text-align:center. This is wrong because you can't center spans in that way, so I moved it to your container div.
The quick hack is the line-height, set to approximately the known size of your image. This technique is good and safe when you are doing a single line of text and the size of the elements involved is known.
This will fix it:
/* should be block level element */
#invoiceCount{
display: block;
}
See here: http://jsfiddle.net/W5jQd/5/
You could add the following to the CSS of #invoiceNav
text-align: center;
line-height: 32px;
the first centers the <span> element and the second centers the text vertically in the <div> (same height as the images)
The problem is caused by the fact that doesn't support "width", since it's an inline block. The following changes will do the trick: in HTML change <span id="invoiceCount">0 of 0</span> to <div id="invoiceCount">0 of 0</div> and in CSS add width to the #invoiceCount like this:
#invoiceCount {
text-align:center;
width: 100%;
}