I tried using below code but the heading comes in next line.
The code is given below :
<div style="display:inline;">
<img src="abc.png" style="margin:10px 10px 10px 10px;width:97px;height:50px;" />
<h5 style="display:inline-block">Hello</h5></div>
Expected Output!!
Change your styles like below. Add float:left; to both img and h5 tags to get your result.
UPDATED OUTPUT
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div style="display: inline-block;width: 100%;">
<img src="https://smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus.gif" style="float:left;" />
<h5 style="text-align:center;">Hello</h5>
</div>
</body>
</html>
Here I used inline styles as you are using that. But always try to avoid inline styles.
<div style="display: inline-block;width: 100%;text-align: center;">
<img src="https://placeholdit.imgix.net/~text?txtsize=12&txt=97%C3%9750&w=97&h=50" alt="img" style="text-align: left;float: left;" />
<h5 style="margin: 17px 0;">Hello</h5>
</div>
div {
display: flex;
align-items: center;
}
img {
margin: 10px 10px 10px 10px;
width: 97px;
height: 50px;
flex: 0 0;
}
h5 {
padding: 0;
margin: 0;
flex: 1 0;
text-align: center;
}
.div {
position: relative;
min-height: 70px;
}
.img {
position: absolute;
left: 0;
top: 0;
}
<h4>Center of text part</h4>
<div>
<img src="http://beerhold.it/97/50">
<h5>Hello</h5>
</div>
<hr>
<h4>Center of vieport</h4>
<div class="div">
<img class="img" src="http://beerhold.it/97/50">
<h5>Hello</h5>
</div>
Its on the same line
<div style="display:inline;background:red; float: left;">
<img src="http://image.flaticon.com/icons/png/128/33/33702.png" style="margin:10px 10px 10px 10px;width:97px;height:50px;"><h5 style="display:inline-block; background:blue;color:#fff; vertical-align:top;">Hello</h5></div>
Use vertical-align to align elements vertically (does not work for block elements).
div {
display: inline
}
h5 {
display: inline-block;
vertical-align: middle;
}
img {
margin: 10px;
width: 97px;
height: 50px;
vertical-align: middle;
}
<div>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" />
<h5>Hello</h5>
</div>
I didn't understand what's your problem. Just try this..
<div style="display:inline;">
<img src="abc.png" style="float:left; margin:10px 10px 10px 10px;width:97px;height:50px;" />
<h5 style="display:inline-block;">Hello</h5></div>
Related
So I have multiple div tags, each one represents a inline-block. Each div has an image and headings as text. I want to be able to display them side by side, as seen from this image:
(For this image, see the "Getting Started" section, as this is what I'm referring to specifically.)
My question is how do I achieve this structure? I've tried positioning the images and text side to side, but it didn't work in the code below.
.Getting-Started {
background-color: lightBlue;
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
}
.Step1,
.Step2,
.Step3 {
display: inline-block;
}
br {
margin: 0px;
padding: 0px;
line-height: 0px;
}
.Step1 {}
.Step2 {}
.Step3 {}
<div class="Getting-Started">
<h1 style="margin: 0 0 20px;">Getting Started</h1>
<div class="Step1">
<img src="#" alt="#">
<h2 style="margin: 0px;">Step 1: Select your year level above</h2>
</div>
<br>
<div class="Step2">
<img src="#" alt="#" width="">
<h2>Step 2: Choose a level of difficulty you feel cofident with</h2>
</div>
<br>
<div class="Step3">
<img src="#" alt="#">
<h2>Step 3: Select a topic and click on "Read More"</h2>
</div>
<br>
</div>
https://jsfiddle.net/ct69hkbg/
Your mistake is in your css making div elements with class "step1, step2, step3" to inline-block.
You have to make display of children of these elements to inline-block
.Getting-Started {
background-color: lightBlue;
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
}
.step h2,
.step img {
display: inline-block;
vertical-align: middle;
}
.step img {
margin-right: 10px;
}
br {
margin: 0px;
padding: 0px;
line-height: 0px;
}
refactored your code a bit and replaced "step1, step2, step3" to step as you can see in the code
check this out: https://jsfiddle.net/gj02r3dn/
Remove your Step1...3 classes from your HTML and your CSS.
Remove the <br> tags.
Use div:nth-of-type(odd) img and div:nth-of-type(odd) img selectors to
float your images left/right alternatingly.
.Getting-Started {
background-color: lightBlue;
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
}
br {
margin: 0px;
padding: 0px;
line-height: 0px;
}
.Getting-Started div:nth-of-type(odd) img {
float: left;
}
.Getting-Started div:nth-of-type(even) img {
float: right;
}
<div class="Getting-Started">
<h1 style="margin: 0 0 20px;">Getting Started</h1>
<div>
<img src="#" alt="#">
<h2>Step 1: Select your year level above</h2>
</div>
<div>
<img src="#" alt="#" width="">
<h2>Step 2: Choose a level of difficulty you feel confident with</h2>
</div>
<div>
<img src="#" alt="#">
<h2>Step 3: Select a topic and click on "Read More"</h2>
</div>
</div>
Here is the Simple Code
HTML
<h3>
<span class="first-label">This is the main label</span>
<span class="secondary-label">secondary label</span>
</h3>
CSS
.first-label:after {
content: '\A';
white-space: pre; }
try this code:
.Getting-Started {
background-color: lightBlue;
padding-top: 20px;
padding-bottom: 50px;
}
.Step {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
border: 1px solid #000;
text-align: right;
}
.Step:nth-child(2n) {
flex-direction: row;
text-align: left;
}
.Step h2 {
flex: 0 0 60%;
}
img {
width: 150px;
height: 150px;
background-color: yellow;
border: 2px solid yellow;
}
<div class="Getting-Started">
<h1 style="margin: 0 0 20px;">Getting Started</h1>
<div class="Step">
<img src="#" alt="#">
<h2 style="margin: 0px;">Step 1: Select your year level above</h2>
</div>
<div class="Step">
<img src="#" alt="#" width="">
<h2>Step 2: Choose a level of difficulty you feel cofident with</h2>
</div>
<div class="Step">
<img src="#" alt="#">
<h2>Step 3: Select a topic and click on "Read More"</h2>
</div>
</div>
heading element <h1> through <h6>, hence can't be displayed inline or inline-block. Use inline elements instead for eg. span.
https://jsfiddle.net/snehansh/xdw9cp50/4/
.Getting-Started {
background-color: lightBlue;
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
}
.Step1, .Step2, .Step3 {
display: inline-block;
}
br {
margin: 0px;
padding: 0px;
line-height: 0px;
}
.Step1 {
}
.Step2 {
}
.Step3 {
}
<div class="Getting-Started">
<h1 style="margin: 0 0 20px;">Getting Started</h1>
<div class="Step1">
<img src="#" alt="#">
<span>Step 1: Select your year level above</span>
</div>
<br>
<div class="Step2">
<img src="#" alt="#" width="">
<span>Step 2: Choose a level of difficulty you feel cofident with</span>
</div>
<br>
<div class="Step3">
<img src="#" alt="#">
<span>Step 3: Select a topic and click on "Read More"</span>
</div>
<br>
</div>
I would like to know how can I move the text next to the little images. As you can see it in the image, the text and icons are not completely in-line with each other.
h1.titu{
margin-left: 370px;
margin-top: 20px;
padding-top: 1px
color: #fff;
font-family: arial;
font-size: 7vw;
text-transform: uppercase;
background: url(../images/lines.jpg);
background-size: cover;
-webkit-text-fill-color:
transparent;
-webkit-background-clip: text;
}
.socialmedia {
margin-left: 400px;
}
img.eye{
float: right;
padding-right: 240px;
}
img.instagram{
padding-left: 190px;
}
img.twitter{
}
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="../CSS/main.css" rel="stylesheet" type="text/css">
</head>
<body id ="contact">
<h1 class="titu">contact</h1>
</body>
<div class="socialmedia">
<p >
<img class="insta" src="../images/insta.png" width="60">
Juliancmr
</p>
<p>
<img class="twitter"src="../images/twitter.png" width="60">
Julian Mancera
</p>
<p>
<img class="twitter"src="../images/in.png" width="60">
Julian.mr mancera
</p>
<p>
<img class="mail" src="../images/mail.png" width="60">
Julian.mr#hotmail.com
</p>
</div>
</html>
Using vertical-align on images you can tweek it's position like this
.socialmedia img{
vertical-align:-10px;
}
Tweak the -10px up or down to your liking
If you put the images and text in a div that has display: flex on it, it will align things center. Something like:
<div class="flex-row">
<img src="image-src.jpg">
<p>caption<p>
<img src="image-src.jpg">
<p>caption<p>
</div>
Working fiddle:
https://jsfiddle.net/02sgLq1n/2/
Firstly, your body tag in the given html is prematurely closed (it's before the div, it should be at the end of the body content, i.e. before the </html> tag). Also, as mentioned in a previous answer, the body tag does not take an id, it is a native tag and can be referred to as body{} in css.
As for the matter of positioning the icons, I too would recommend flex, although given that you are a beginner, it may be running before you can walk. I have linked to an article that is a good read if you want to use this.
You are using quite a few classes as-is to style your icons. If you want your icons to have similar height/width/position, I would recommend using one icon class, and setting the img src in the HTML.
Sample snippet using flex:
#container {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
align-items: center;
margin-left: 200px;
}
.icon {
margin: 10px;
height: 50px;
width: 50px;
background-color: lightgrey;
border: 1px solid grey;
}
<div id="container">
<div class='flex-row'>
<img class='icon' src=" " alt="Insta icon">
<p>Instagram</p>
</div>
<div class='flex-row'>
<img class='icon' src="https://image.flaticon.com/icons/svg/1051/1051280.svg" alt="Twitter icon">
<p>Julian.mr mancera</p>
</div>
<div class='flex-row'>
<img class='icon' src=" " alt="LkedIn icon">
<p>LinkedIn</p>
</div>
<div class='flex-row'>
<img class='icon' src=" " alt="Email icon">
<p>E-mail</p>
</div>
</div>
OR you could use display:inline-block with vertical-align:middle to align your img/paragraphs as follows: (jsfiddle)
#container {
display: inline-block;
}
.socialmed {
display: inline-block;
margin: 0 0 0 200px;
}
.smtext {
color: red;
font-family: "Verdana", sans-serif;
font-size:10pt;
}
.icon {
margin: 10px;
height: 50px;
width: 50px;
background-color: lightgrey;
border: 1px solid grey;
}
.icon, .smtext {
display: inline-block;
vertical-align: middle;
}
<div id="container">
<div class='socialmed'>
<img class='icon' src=" " alt="Insta icon">
<p class='smtext'>Instagram</p>
</div>
<div class='socialmed'>
<img class='icon' src="https://image.flaticon.com/icons/svg/1051/1051280.svg" alt="Twitter icon">
<p class='smtext'>Julian.mr mancera</p>
</div>
<div class='socialmed'>
<img class='icon' src=" " alt="LkedIn icon">
<p class='smtext'>LinkedIn</p>
</div>
<div class='socialmed'>
<img class='icon' src=" " alt="Email icon">
<p class='smtext'>E-mail</p>
</div>
</div>
Hope this helps!
I am trying to align an icon with some text like this:
however it comes out like this:
.percent {
float: right;
display: inline-block;
position: relative;
}
.card-icon {
float: left;
}
<div class="col-md-4">
<div class="card">
<div class="card-header" id="blue">
<p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
</div>
<p class="percent"> <img class="card-icon" src="app/assets/images/self.png" alt="Smiley face"> 1% </p>
EDIT ****
With the last answer provided it shows up like this:
.card-icon {float: left;margin-right:10px; }
<style type="text/css">
</style>
<div class="col-md-4">
<div class="card">
<div class="card-header" id="blue">
<p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
</div>
<div class = "percent">
<img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
<div class="card-txt"> 1% </div>
</div>
</div>
</div>
Try to use inline-block instead of floats:
.card-icon {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
}
.card-icon:after {
content: "=";
position: absolute;
right: -16px;
top: 50%;
transform: translateY(-50%);
}
.percent .card-txt:nth-of-type(1) {
text-align: center;
}
.card-txt {
display: inline-block;
vertical-align: middle;
text-align: center;
margin-left: 24px;
}
.block {
display: block;
}
<div class="col-md-4">
<div class="card">
<div class="card-header" id="blue">
<p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
</div>
<div class="percent">
<img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
<div class="card-txt">
<span class="block">1%</span>
<span class="block">service tax + VAT</span>
</div>
</div>
</div>
</div>
Sometimes the best solution is an old solution. Using HTML tables allows you to control vertical height with a high level of browser support, and backwards compatibility. Using this approach also make the element responsive. Other solutions that adopt the relative/absolute position method can suffer when resizing browser window size.
table {
margin: 0 auto;
border: 1px solid blue;
}
table tr td {
padding: 10px;
width: 100px;
text-align: center;
vertical-align: middle;
position: relative;
}
table tr .number-cell {
padding-top:10px;
width: 80px;
}
table tr .number-cell .value {
margin-top: 4px;
font-size: 42px;
}
table tr .number-cell .sub-heading {
background: grey
}
table tr .equal-cell {
width: 0px;
}
table tr td img {
width: 100%;
}
<div>
<h1>MY WEBSITE</h1>
<table>
<tr>
<td class="image-cell">
<img src="https://www.fillmurray.com/100/100"/>
</td>
<td class="equal-cell">
<span class="equal">=</span>
</td>
<td class="number-cell">
<div class="value">1%</div>
<div class="sub-heading">service fee</div>
</td>
</tr>
</table>
</div>
.card-icon {float: left;position:relative;z-index:1; }
.card-icon:after {content:"=";position:relative; left:25px;}
.percent .card-txt:nth-of-type(1) {text-align:center;position:relative; left:-55px;}
.card-txt {text-align:center; width:400px;background:#ddd;}
<div class="col-md-4">
<div class="card">
<div class="card-header" id="blue">
<p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
</div>
<div class = "percent">
<img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
<div class="card-txt"> 1% </div>
<div class="card-txt"> service tax + VAT </div>
</div>
</div>
</div>
If you want more controle you can use flex styling. An example:
.card {
position: relative;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
width: 500px;
}
.card-header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px;
background-color: blue;
color: white;
font-size: 24px;
}
.card-content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: gray;
}
.card-header > img {
position: absolute;
right: 0;
width: 50px;
height: 50px;
}
<div class="card">
<div class="card-header">
<span>Self Managed</span>
<img src="app/assets/images/star.png" alt="">
</div>
<div class="card-content">
<img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
<span>1%</span>
</div>
</div>
I am trying to align logos horizontally with the respective text underneath them so they look nice and in order. Currently, they are just vertical. I have searched this site and many others, and tried different solutions but nothing seems to work. Here is my code.
.intro-text {
color: #000000;
display: block;
width: 100%;
margin: 50px 0 0 0;
text-align: justify;
line-height: 1.8em;
}
.intro-text-3d {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
.intro-text-process {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
.intro-text-toolset {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
/** Logos **/
.logos-all {
display: block;
text-align: center;
margin: 0 auto;
}
img {
display: inline-block;
margin: 0 auto;
vertical-align: middle;
border: 0;
line-height: 50px;
max-width: 100%;
width: 5%;
height: auto;
margin-bottom: .95em;
}
strong {
display: block;
font-weight: 700;
text-align: center;
}
section h4 {
text-align: center;
}
<article>
<section>
<p class="intro-text">
Some text goes here.
</p></div>
<div>
<img src="http://lorempixel.com/80/79" alt="CSS3" height="80" width="79"/>
<strong>CSS3</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="Javascript" height="80" width="79"/>
<strong>Javascript</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="Wordpress" height="80" width="79"/>
<strong>Wordpress</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="PhP" height="80" width="79"/>
<strong>PhP</strong>
</div>
</div>
</section>
<section>
<p class="intro-text-3d">
Some text goes here
</p>
<div class="logos-all">
<div>
<img src="img/3ds max-logo.png" alt="3ds Max" height="80" width="79"/>
<strong>3DS MAX</strong>
</div>
<div>
<img src="img/c4d-logo.png" alt="Cinema 4D" height="80" width="79"/>
<strong>Cinema 4D</strong>
</div>
<div>
<img src="img/blender-logo.png" alt="Blender 3D" height="80" width="79"/>
<strong>Blender</strong>
</div>
</div>
</section>
<section>
<h4>How the process works</h4>
<p class="intro-text-process">Some text goes here </p>
</section>
<section>
<h4>Design Toolset</h4>
<p class="intro-text-toolset">Some text goes here.</p>
<div class="logos-all">
<div>
<img src="img/photoshop-logo.png" alt="Photoshop" height="80" width="79"/>
<strong>Photoshop</strong>
</div>
<div>
<img src="img/illustrator-logo.png" alt="Illustrator" height="80" width="79"/>
<strong>Illustrator</strong>
</div>
<div>
<img src="img/gimp-logo.png" alt="Gimp" height="80" width="79"/>
<strong>Gimp</strong>
</div>
<div>
<img src="img/inkscape-logo.png" alt="Inkscape"/>
<strong>Inkscape</strong>
</div>
</div>
</article>
</section>
Because your images are inline-block, you need to put text-align: center on the parent (the <div>).
Alternatively:
You could also make your images display: block
Or using flexbox:
Make your <div> display: flex; flex-direction: column and your image width: auto;
You can use floats to align blocks with images and text horizontally and text-align to align images and text inside them.
Overflow hidden inside section clears floats inside them, in case you'd want to have background on it and it wouldn't display properly.
.intro-text {
color: #000000;
display: block;
width: 100%;
margin: 50px 0 0 0;
text-align: justify;
line-height: 1.8em;
}
.intro-text-3d {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
.intro-text-process {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
.intro-text-toolset {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
/** Logos **/
.logos-all {
display: block;
text-align: center;
margin: 0 auto;
}
img {
display: inline-block;
margin: 0 auto;
vertical-align: middle;
border: 0;
line-height: 50px;
max-width: 100%;
width: 5%;
height: auto;
margin-bottom: .95em;
}
strong {
display: block;
font-weight: 700;
text-align: center;
}
section h4 {
text-align: center;
}
section {
overflow: hidden;
}
section > div {
text-align: center;
float: left;
width: 25%; /* 1/logos in row */
}
<article>
<section>
<p class="intro-text">
Some text goes here.
</p></div>
<div>
<img src="http://lorempixel.com/80/79" alt="CSS3" height="80" width="79"/>
<strong>CSS3</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="Javascript" height="80" width="79"/>
<strong>Javascript</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="Wordpress" height="80" width="79"/>
<strong>Wordpress</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="PhP" height="80" width="79"/>
<strong>PhP</strong>
</div>
</div>
</section>
<section>
<p class="intro-text-3d">
Some text goes here
</p>
<div class="logos-all">
<div>
<img src="img/3ds max-logo.png" alt="3ds Max" height="80" width="79"/>
<strong>3DS MAX</strong>
</div>
<div>
<img src="img/c4d-logo.png" alt="Cinema 4D" height="80" width="79"/>
<strong>Cinema 4D</strong>
</div>
<div>
<img src="img/blender-logo.png" alt="Blender 3D" height="80" width="79"/>
<strong>Blender</strong>
</div>
</div>
</section>
<section>
<h4>How the process works</h4>
<p class="intro-text-process">Some text goes here </p>
</section>
If you wish to use Bootstrap you can use bootstrap panel .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="https://www.pushpraj.com/images/cool-scenery.jpg" class="img-rounded" alt="error" width="384" height="236">
</div>
<div class="panel-footer">Title 1</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="https://www.pushpraj.com/images/cool-scenery.jpg" class="img-rounded" alt="error" width="384" height="236">
</div>
<div class="panel-footer">Title 2</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="https://www.pushpraj.com/images/cool-scenery.jpg" class="img-rounded" alt="error" width="384" height="236">
</div>
<div class="panel-footer">Title 3</div>
</div>
</div>
</body>
</html>
I am trying to create a setup mimicking the one in the link with an image, text and a border all horizontally and vertically centered. I've tried a number of different ideas.
The below is the closest I've gotten but even then I'm still experiencing issues with the border displaying and things not being centered the way I want them.
<div style="max-width: 800px; height border: 1px solid #c6c6c6; border-radius: 5px; padding: 35px; margin-left: 60px; float: center; height: 220px; display: inline-block;">
<img src="image.gif" />
</div>
<div style="height: 220px; display: inline-block;">
<div style="position: relative; top: 50%;">
<h4 style="text-align: center;">Text 1/h4>
<p style="text-align: center;">Text 2<br />Text 3</p>
</div>
</div>
I would try using CSS tables, put the image and the text in separate block level elements that use display: table-cell, all of which are contained in a parent container using display: table.
.wrapper {
border: 1px solid gray;
border-radius: 5px;
display: table;
height: 220px;
margin: 0 auto;
}
.wrapper .item {
display: table-cell;
vertical-align: middle;
text-align: center;
min-width: 200px;
padding: 35px;
}
.item img {
display: block;
}
<div class="wrapper">
<div class="item">
<a href="www.google.com" target="_blank">
<img src="http://placehold.it/200x150" />
</a>
</div>
<div class="item">
<h4>Text Line One</h4>
<p>Text 2
<br />Text 3</p>
</div>
</div>
you should put inline-block on image and the parent div of text panel and vertical-align:middle .. would do that
.textpane{
height: 220px;
display: inline-block;
vertical-align:middle;
}
.imagepane{
width:50px;
height:50px;
display:inline-block;
vertical-align:middle;
max-width: 800px;
border: 1px solid #c6c6c6;
border-radius: 5px;
padding: 35px;
margin-left: 60px;
height: 220px;
}
<div class='imagepane'>
<img src="image.gif" />
</div>
<div class='textpane'>
<div style="position: relative; top: 50%;">
<h4 style="text-align: center;">Text 1/h4>
<p style="text-align: center;">Text 2<br />Text 3</p>
</div>
</div>
jsfiddle
Note
there is not such thing as float:center;