FAQ Database Discussion Community


CSS: not exact vertical align in table

css,vertical-alignment
I find that if I put an image inside a table cell like this (JSFiddle): <table style="height: 300px; border: 1px solid black"> <tr> <td><img src="https://www.google.com.hk/images/srpr/logo11w.png" /></td> </tr> </table> There will be a small space below the image, making the vertical align not exact: Does any one know what is happening...

Vertical alignment of a floated div

html,css,vertical-alignment
I'm trying to center vertically a floated div, here is the JSFiddle .wrapper{ width:250px; background-color:red; } #SmileImg{ height:100px; width:auto; } .textwrapper{ float:right; } <div class="wrapper"> <img src="http://img.xcitefun.net/users/2010/02/147370,xcitefun-smile-4.png" id="SmileImg" /> <div class="textwrapper"> <p>Please Smile!</p> </div> </div> I do not know how to put the text "Please Smile" vertically centered. Hope someone...

Align two labels vertically with different font size

ios,autolayout,uilabel,vertical-alignment,baseline
I have a parent UIView where I place two labels on it. Each of these labels only has one line as can be seen here: The problem now is that the baseline is wrong. I'm using auto layout and the question is how should my constraints should look like in...

CSS vertical align button in div not working

html,css,vertical-alignment
My CSS button is not vertical aligning at the bottom of the div, I've got the following code: <div id="spacebuttons" align="right" style="height: 150px; width:920px; background-color:#6F0; display: inline-block; float:left; vertical-align:bottom"> <a href="http://www.domain.com/cspace/customerspace.php"> <img src="images/FontAwesome_f007(0)_32.png" alt="customer space" width="32" height="32" border="0" /> <button type="button" class="btn btn-default btn-sm"...

Vertical Align images inside li Chrome Issue

html,css,vertical-alignment
I want to vertically align images inside li, My code works fine in firefox but not in chrome. Can any body help me with this? Here is the HTML: <div class="brands container content"> <ul id="brandlogo"> <li><a href="http://scrub-market.hostedbywebstore.com/Alegria/b/11442638011" class=""><img src="https://images-na.ssl-images-amazon.com/images/I/12MlwaGE42L.png" alt=""/></a></li> <li><a href="http://scrub-market.hostedbywebstore.com/Cherooke/b/11442639011" class=""><img...

Vertically Align divs and text

html,css,vertical-alignment
[jsfiddle.net/c8q17Lu4/][1] Hello, I'm having trouble with probably an easy fix. I need to vertically align the '#header-right-b-headers' orange divs within the blue '#header-right-b' div, and also vertically align the text in the orange divs. I've tried the vertical-align and display as inline block rules, and some others, and don't understand...

Vertical-top align ul items side by side

css,html5,html-lists,vertical-alignment
I set my UL items to have display: inline-block, 30% width, and they align side by side corretly. But, they vertical align to bottom if there is a bigger li. Is there any way to top align this items? One solution that I don't like is to have a Javascript...

Vertical align images evenly in Bootstrap 3 with respect to next column

html,css,twitter-bootstrap,twitter-bootstrap-3,vertical-alignment
I want to vertically align one or multiple images with a text (whose height is unknown). The images should be vertically centered: The current HTML code looks like this: <div class="row"> <div class="col-md-3"> <img src="images/sampleimage.png" class="img-rounded img-responsive"/> </div> <div class="col-md-9"> Text goes here </div> </div> How can I achieve this...

Align images at the bottom of vertical menu

css,vertical-alignment
I am currently remaking a website for the group I sing with. I have a vertical menu that I found. Now I will openly say that the menu was just something I found so the coding for it as well as the CSS are not mine. I have tweaked a...

Robust vertical alignment of both box and baseline using line-height?

css,vertical-alignment
When setting the same line-height, height and box-sizing: border-box on elements in a line, I'd expect them to align vertically (both at the baseline and the box) properly. No luck: alignment seems to always be off by one pixel for some combination of input/span and/or with-border/without-border. See below or http://jsfiddle.net/xcgyh22q/9/...

How to center horizontal table-cell and content inside it in the middle

html,css,vertical-alignment
I am building on the question originally asked here How to center horizontal table-cell with a slight modification. Basically, DIVs need to be centered as they are now, however, I also need to vertically align all the content in the cell in the middle. Changing vertical-align: middle; for .column does...

Why does vertical-align: middle causes other elements to misalign?

html,css,vertical-alignment
With this code: .header { background-color: #444; height: 56px; color: white; } a { padding: 20px; } input { background-color: #444; border: 0; line-height: 24px; margin-left: 10px; color: white; height: 56px; padding: 0; font-size: 20px; vertical-align: middle; } <div class="header"> <a href="#"> <img src="http://directoryapp.trimian.com/img/directory/ic_search_white.png" /> </a> <input placeholder="Search" /> </div>...

Bootstrap: Vertically center label in form-group

forms,twitter-bootstrap,vertical-alignment,valign
I have a form-group inside a horizontal form. In this form-group, the right element is higher than the left one. For this reason, I want to center the left element vertically in its row. For instance: <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email1</label> <div class="col-sm-10"> <!-- higher element -->...

How to add vertical alignment feature to a major-mode for Emacs

emacs,elisp,vertical-alignment,system-verilog
I am using verilg-mode for emacs everyday but the code alignment is not that good for me. So want to add something like vertical alignment. First, I hope to align the declaration lines like these: bit [1:0] a; bit [3254:0] b; bit unsigned [P_DWIDTH-1:0] c; bit unsigned [P_DWIDTH-1:P_DWIDTH-4] d; int...

How to vertically align icon font

html,css,vertical-alignment,icon-fonts
I am trying to vertically align font icons. I have tried "vertical-align: middle" but I always get a little align difference. The following example has 2 different ways to use the icons and they are not aligned correctly. An example on Jsfiddle: https://jsfiddle.net/crphowLg/7/ <link rel="stylesheet" type="text/css" href="https://fontastic.s3.amazonaws.com/PxvnwqrSXE7pXNDNDqGp4i/icons.css"> <style> div {...

How to vertically align div inside Bootstrap 3 column

html,css,twitter-bootstrap,twitter-bootstrap-3,vertical-alignment
I have a page with Twitter Bootstrap container-fluid class div, one row and one col-md-6 inside that row. Row is set to 50% height of the container, and a column has 100% height of the row. I have a div inside that column, that I want to be in the...

How can I vertically and center 3 buttons on my mobile site?

css,html5,button,vertical-alignment,centering
I am working out of wordpress. I have 3 buttons i would like to place on my mobile site. I would like for these buttons to be centered vertically in the middle of the page. I don't really know how write this code the proper way , nor the css....

place product image at bottom of the box

html,css,image,vertical-alignment
CODE I want image to aligned at bottom of the box. There will be product images which are coming from backend and there is not fix size for it. HTML <ul> <li><img src="http://img3.wikia.nocookie.net/__cb20120422063108/nickelodeon/images/2/27/Spongebob1.gif" alt="" /></li> <li> <img src="http://img2.wikia.nocookie.net/__cb20120717231330/hulksmash/images/7/78/Image_placeholder.jpg" alt="" /> </li> </ul> CSS ul { list-style: none; } li {...

CSS vertical align block in a container

css,html5,vertical-alignment
fiddle Any way to align all .col to the top, matching the height of their siblings above?...

CSS Vertical align to middle

html,css,vertical-alignment
I know this issue was discussed many times before. but honestly I didn't find any proper solution for this unique case: I have the following HTML code: <div class="print-types-links"> <ul> <li> <a href="#"> <div> <span>aaa</span> </div> </a> </li> <li> <a href="#"> <div> <span>bbb</span> </div> </a> </li> </ul> </div> and the...

CSS vertical align puzzle with float right and variable line height

css,vertical-alignment,right-align
I have a table where numbers are aligned to the right and texts can have more than 1 line. http://jsbin.com/qelosicono/1/edit?html,css,output The vertical-align:middle does not work with float:right unless I set the line-height which I can not set because some texts will wrap to multiple lines while other will stay single...

How to align wordpress images properly?

html,css,wordpress,image,vertical-alignment
I have been working on a website in wordpress that has been doing what I need so far. Today I tried adding a row of images (with and without captions), and for some reason the top line of the images are displaying each slightly below the other one. You can...

No matter what I try, I can not vertically align this [closed]

html,css,css3,text,vertical-alignment
I want to do is vertically align this text, and it has become a huge struggle. Any help would be greatly appreciated. HTML: <ul id="nav"> <li> <a href="web2home.html">HOME</a> <span>See who Matthew H. Goodman is</span> </li> <li> <a href="web2cv.html">CV</a> <span>View his current Curriculum Vitae</span> </li> <li> <a href="#">RESEARCH</a> <span id="spectab"><a href="#">Current...

vertically align font awesome icon in td with variable height

html,css,twitter-bootstrap-3,vertical-alignment,font-awesome
I need to vertically align a font-awesome icon in the middle of a td. This td can contain a single or a double line of text, so it has a variable height. I just can't figure out how to align it. I tried everything from line-height over vertical-align to display:...

Fixing custom font vertical position. Apple Font Tool Suite not available anymore?

ios,fonts,apple,vertical-alignment,custom-font
I followed the link in Fonts, and I'm redirected to the downloads site. There I canĀ“t find the Apple Font Suite Tool package, has it been renamed? Or it doesn't longer exist? Thanks EDIT: I'm using custom fonts in my iOS app, and it seems that they add a vertical...

How to center div vertically inside of absolutely positioned parent div

html,css,vertical-alignment,absolute
I am trying to get blue container in the middle of pink one, however seems vertical-align: middle; doesn't do the job in that case. <div style="display: block; position: absolute; left: 50px; top: 50px;"> <div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;"> <div style="background-color: lightblue;">test</div> </div> </div> Result: Expectation: Please suggest...

Center div in middle of other two divs in CSS

html,css,position,vertical-alignment
So, I have this example of how my three divs are suppose to be. I've been playing around with the position:relative in the container and then position:absolute in the three children divs. The thing is I feel like its not the best approach. What do you guys think? This...

vertical aligning two pull-right elements of different heights (Bootstrap)

html,css,twitter-bootstrap,css-float,vertical-alignment
I have two links (one text and one image) that I'm trying to pull-right and have the bottom of each vertically-align. But right now, it looks like this: (vertically aligned with each others' tops) Relevant HTML: <div class="col-md-7"> <div class="thumbnail"> <div class="caption clearfix"> <h2>Heading</h2> <p class="thin">Donut jelly beans muffin cupcake....

css drop down list align img and text

html,css,vertical-alignment,text-alignment
I have a problem in my css that I can figure it out, I need to align the text and the img in my drop down list in the center. The igm looks in center but the text is a bit lower. I want also to make the text a...

How to vertically center the contents of a flexbox item

html,css,css3,vertical-alignment,flexbox
I'm trying to center the CONTENTS of a flexbox item while using justify-content:stretch; It appears that the old trick of using display:table-cell;vertical-align:middle; doesn't work in this situation. What does? .flex-container { display:flex; align-items:center; justify-content:stretch; } .flex-item { align-self:stretch; } <div class="flex-container"> <div class="flex-item">I want to be vertically centered! But I'm...

Vertically center image when image is higher than container

html,css,vertical-alignment
I have a responsive design with a header image which is placed in a container. The image has width:100%; and height:auto; so it grows as you enlarge the viewport. I don't want to exceed a certain height so the container has a max-height. The image still grows but now the...

Vertical-align in inline-block container

css,vertical-alignment
How to align .content in the middle (vertically) without specifying height of .container explicitly? <div> <div class="container"></div> <div class="content"></div> <div class="one"></div> </div> <style> .container { border:1px solid red; display: inline-block; } .content { height: 50px; width: 70px; display:inline-block; vertical-align:middle; border:1px solid green; } .one { height: 200px; width: 20px; background:...

Align Left and Right floats to bottom of Parent div

html,css,css-float,vertical-alignment
I have an element in an HTML page with child elements <div id="parent"> <div class="child01"></div> <div class="child01"></div> <div class="child02"></div> </div> I have an example with current css at http://jsfiddle.net/exu76qnx/ and I would like to know how to have the child divs align to the bottom of the parent div (without...

How to align text and images in the middle

html,css,css3,vertical-alignment
I added a bar on the top of my website, and I want to align the images and text to the middle. How can I do that? This is what I tried so far, and it seems like I'm doing something wrong. What the best proper way? <div class="casual" style="...

vertical align a div next to another div

html,css3,vertical-alignment
I need to vertically align a div that has text that is next to a div that contains an image. The content can have multiple lines in the title (if you see image). Currently how the html is: <div class="small-view"> <div class="small-left"> <img src="image.png" width="80"> </div> <div class="small-right"> <p class="post-title">This...

Center link vertically in a div

html,css,twitter-bootstrap,vertical-alignment
There is an "place order" link on the web page, which I want to center both horizontally and vertically. I managed to center it horizontally, but not vertically. I'm using Twitter Bootstrap. This is what it looks like now and the red arrow shows where I'd like to put it:...

CSS vertical align based on height of other element

html,css,alignment,vertical-alignment
I'm trying to create a block with an image that contains content by your side, where I intend to align the image vertically based on the content's height. I've tried alignments with table/table-cell technique but I can't get what I want.. click here to see what I want: ...

center text vertically and horizontally over div/img

css,vertical-alignment
I'm trying to get "concierge" to always be centered over the image on this page. I think I'm close but it's not just right. Any ideas? header.concierge_header { position: absolute !important; top: 30% !important; color: white !important; left: 50%; } and then concierge_header_div is the parent other option would be...

::before vertical alignment in variable height div

html,css,vertical-alignment
I've got a dropdown box I'm working with that contains optional text and a pseudo-button (just an image, the whole box is clickable to drop down the contents). HTML for the whole piece looks something like: <div class= "btn-group dropdown" datatype = "responses" datadrop = 0> <a class = "dropdown-toggle...

IntelliJ align multiple lines of code vertically

intellij-idea,vertical-alignment,pycharm
I am wondering how to align (the keyboard shortcut) a line or a block of code with the previous line, so that they have the same indention or starting from the same column in IntelliJ and PyCharm. cheers...

Set Javascript output vertical alignment to middle?

javascript,html,css,vertical-alignment
I have a Javascript clock showing in a thin frame: <!DOCTYPE html> <HTML> <HEAD> <TITLE>Untitled</TITLE> <SCRIPT> function checkTime(i) { if (i < 10) { i = "0" + i; } return i; } function startTime() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var...

When to use position absolute vs position relative when vertically aligning with css

html,css,css3,css-position,vertical-alignment
Originally I followed this article which used position: relative on the child element: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ http://codepen.io/anon/pen/KpWKWg But I couldn't get it to work on my code for the life of me: http://jsfiddle.net/ge77ma0e/ Then I found these instructions which use position: absolute on the child element: https://css-tricks.com/centering-css-complete-guide/#vertical-block-unknown http://codepen.io/chriscoyier/pen/lpema And when I tried...

How to vertical align icon inside label and button in the same way

html,css,css3,vertical-alignment
I'm trying to center vertically an icon inside an ul/li tag. Depending if placing the icon inside a button tag and label tag I get two different results and I can not get the alignment in the label working. <ul> <li><label class="btn"><i class="fa fa-anchor"></i></label></li> <li><button class="btn"><i class="fa fa-anchor"></i></button></li> <li><button class="btn"><i...

Horizontal ScrollView in fragment Android

android,scrollview,vertical-alignment
I would like to make my ScrollView filling out the full layout of a fragment and scrolling horizontally, not vertically. How can I achieve that?! Like the album covers Thanks...

text vertical align whether it is two lines or one line

css,vertical-alignment
Actually I am trying to align the text vertically middle. Please find below image![ .factorsContent li { list-style-type:none; width:30%; margin:0px 15px; float:left; } /* 10 FACTORS BOX */ .factorsBox { width:100%; height:290px; background:#f4f4f4; border:4px solid #f4f4f4; margin-bottom:20px; } .downloadPdfImg { float:right; margin:40px 0 0 0; } .factorsBox .factorHeading { padding:10px;...

Vertically align a div in a parent which has height auto AND min-height set?

css,css3,center,vertical-alignment
I'm stuck on this one. I want to vertically center a div. Its parent has an unknown height, however, it does have a min-height. How can I do this?...

Vertical centering various sized spans with line-height

html,css,vertical-alignment
I want to gain a deeper understanding of how line-height works, in particular with centering text vertically within a fixed height element. In the example link below, you can see that setting the line-height to be equal to the container's height will center items as long as the items are...