May 18, 201313 yr I'm not liking CSS today. Several hours later and what I imagined would be a really simple thing to do still eludes me. I want to align text vertically against an image for a logo, so even if the text is not as tall as the image, it will have the same amount of space above and below it. Here's my basic code: <html> <head> <style type="text/css"> #logo{ height:100px; width:960px; } #logo h2{ display:inline; font-size:72; color:red; text-shadow:1px 1px 2px black; padding-left:5px; } </style> </head> <body> <div id="logo"> <img src="my image" alt="image for logo"> <h2>Text to align vertically</h2> </div> </body> </html> Can someone please help? Regards, Robin.
May 18, 201313 yr I guess you can try: #logo{ display:table; } #logo img, #logo h2{ display:table-cell; vertical-align:middle; } Hope that helps
May 19, 201313 yr Otherwise you can position both absolutely in a div. For more control you could absolute position the h2 as well and use top to get it exactly where you want. <div id="logo"> <div class="image"></div> <h2>Text to align vertically</h2> </div> #logo{ height:100px; position: relative; width: 800px; } .image{ height: 100px; width:100px; background: red; position: absolute; } h2{ font-size:72px; color:red; padding-left:110px; height: 100px; line-height:100px; background: black; width: 700px; } Edited May 19, 201313 yr by mantis
May 19, 201313 yr <html> <head> <style type="text/css"> #logo{ background: url(YOUR_IMAGE) no-repeat; background-position: 0 50%; /* 50% to align background vertically */ height:100px; border: solid 1px red; width:960px; } #logo h2{ font-size:72px; color:red; text-shadow:1px 1px 2px black; margin: 0; padding-left: 250px; /* depends on YOUR_IMAGE width */ } </style> </head> <body> <div id="logo"> <h2>Text to align vertically</h2> </div> </body> </html> Also you can put your image in background.
May 19, 201313 yr Author Thanks for all your advice. Teodora's code works a treat, and seems like the most simple solution. The plot thickens though as I go further down the rabbit hole and try to make a simple logo work in a responsive theme. Can anyone suggest how to style this code: <div id="logo"> <img src="logo_image" alt="logo_image"> <h2>display logo text</h2> </div> so that the text automatically has the same height as the image, even when the window is resized? Also, how about this version? <div id="logo"> <img src="logo_image" alt="logo_image"> <h2>display<br>logo<br>text</h2> </div> Thanks in advance for any further advice, Robin.
May 19, 201313 yr Oh, great, I was writing this code on the top of my head last evening, it was quite late, but glad it worked. I will try to make a responsive solution in a minute.
May 19, 201313 yr Reading your post again, I realised you were not looking for what I made, but anyway, here it is -responsive. <html> <head> <style type="text/css"> #logo{ height:auto; max-width:960px; width:100%; display:table; } #logo img{ display:table-cell; vertical-align:middle; } #logo h2{ display:table-cell; vertical-align:middle; text-align:left; font-size:72; color:red; text-shadow:1px 1px 2px black; padding-left:5px; } @media only screen and (max-width: 600px) { #logo{ display:block; text-align:center; } #logo img{ display:inline; } #logo h2{ display:block; text-align:center; } } </style> </head> <body> <div id="logo"> <img src="logo.png" alt="image for logo"> <h2>Text to align vertically</h2> </div> </body> </html> About your other questions: so that the text automatically has the same height as the image, even when the window is resized? Not sure what you mean - maybe just put a background on the text, so it looks the same height as the image. Also, how about this version? <div id="logo"> <img src="logo_image" alt="logo_image"> <h2>display<br>logo<br>text</h2> </div> The same as above I guess, it's not good to use <br/> because then you don't have control over the text with CSS, as <br/> is part of the HTML. Give it a width and change it on lower resolutions using media queries.
May 19, 201313 yr Thanks for all your advice. Teodora's code works a treat, and seems like the most simple solution. The plot thickens though as I go further down the rabbit hole and try to make a simple logo work in a responsive theme. Can anyone suggest how to style this code: <div id="logo"> <img src="logo_image" alt="logo_image"> <h2>display logo text</h2> </div> so that the text automatically has the same height as the image, even when the window is resized? Also, how about this version? <div id="logo"> <img src="logo_image" alt="logo_image"> <h2>display<br>logo<br>text</h2> </div> Thanks in advance for any further advice, Robin. Just as I typed the first letter, Teodora replied I've had similar issues before. Vertical-align never worked for me (in fact, ever!) so I used to put the text in <hgroup> rather than use a <br> (see rbtsmith's post on <hgroup>) and set the padding-top or the margin as a percentage. It worked for me, but semantically... well. I dunno. I think I'll implement the above code myself to see how I get on.
May 19, 201313 yr Vertical align would work with table and inline or inline-block elements, as far as I know. The above code displays the text and the image as table cells, the logo div is displayed as table, it takes 100% of the parent width. It resizes well down to 600px, so I added the media query for below 600px and changed the display to block and inline for the image and h2. Plus I aligned them in the center purely because it looked better than being left aligned. There could be a better solution than that, all depends on the actual layout of the theme.
May 19, 201313 yr Author Hi Teodora, Your original code was what I was looking for, just my idea changed! I may be trying to use a sledgehammer to crack a nut here. My original idea was to use photoshop to make a logo like this: or this: I didn't notice until I changed the background that the resolution was awful. Then I read up and learned that PS is no good for this kind of thing since it uses raster(?) graphics. So it seemed better to use html and css for better resolution, especially if the screen is enlarged. What I don't want is for the text to jump away from the image. So I probably should just go with your original answer and use a fixed font size, although not sure how to keep it all together with the "stacked" version. The trouble is that as a novice, I don't have the overview of what the different options are, and experience to know which is best in a particular situation. It might well be that something like this should be done as an image, but with a different program to PS. I'm curious to know how more experienced people would go about creating this kind of logo. Sorry to ramble, and thanks again, Robin.
May 19, 201313 yr Author ... What I don't want is for the text to jump away from the image... Unless it does so "gracefully!" Media queries sound scary, although I could probably get my head around them eventually. Amazing how something so simple seeming can get so complicated!
May 19, 201313 yr ... What I don't want is for the text to jump away from the image... Unless it does so "gracefully!" Media queries sound scary, although I could probably get my head around them eventually. Amazing how something so simple seeming can get so complicated! First of all, you didn't ramble - completely understand your dilemma. Photoshop is great and all, but for logo's I'd suggest Illustrator (if you have it as the package). Type is better with InDesign, but I wouldn't necessarily say jump straight into that. To cut a long story short, logo's work better in vector format as they scale well. Your immediate options are AI but if you don't have that, Inkscape is a free option. If you're on Mac, I recommend Sketch - it's about £30 (I think) - kudos to Jack for the recommendation. Media Queries are really not that bad. I'm a designer by trade (ha!) and code scares me in many respects. Media Queries is pretty intuitive but I think it makes a different on your coding preference. I design Mobile-First. It doesn't feel natural, but it makes sense to my mangled brain. If you build from there, your CSS will differ greatly if you are sizing down from desktop. Post away any questions - media queries really are your friends, as are we (I'm breaking into a Carpenters song now )
May 19, 201313 yr May I ask what is the theme you are going to use the logo with? Do you have a link? Is that going to be dynamic text / image (e.g. inserted by users, so you don't know what it could be) or static (it won't change once done)? There are many ways to achieve that. Maybe do the logo as an image in Incscape, as 4li4s said (vector editor, free http://inkscape.org/) and save as svg. Then you can have the logo image as an svg. <img src="logo.svg" alt="image for logo"> so it looks good on any screen resolution.
May 20, 201313 yr Inkscape looks good, I hadn't seen that before. I've heard lots of great things about Sketch that 4li4s mentioned http://www.bohemiancoding.com/sketch/. If I didn't have Ps and Ai already I'd get it. That said your logo will not look the same as a vector image. On the other hand it will look crisp at almost any size.
May 20, 201313 yr I do think you can get away with some nice logo's created as a .png but they have to be pretty large to remain so sharp - defeating the object with mobile really. One of the many benefits of a vector is the scalability of it all and I would really push for .svg with a fallback in place. Don't forget that Sketch is currently for Mac only if you're thinking of going that route
May 21, 201313 yr Author Thanks again everone. I tried inkscape, but then wordpress wouldn't let me upload svgs. Then I fixed that but the theme "responsive for wordlpress" still wouldn't have it. I've learned loads though, so really appreciate your input. Teodora: I'm woking on my laptop using xampp so no link yet. Your first solution seems to work fine though.
May 21, 201313 yr You need to add filters on WordPress for using SVG http://wordpress.org/support/topic/svg-upload-not-allowed Good luck
Create an account or sign in to comment