Tips for aligning the image on the left side and the text on the right side in a vertical line

css

.container{
   height: 250px;
   padding 10px 0;
}
.col-left{
   display: inline-block;
   background-image:url("support.png");
   height:235px; 
   width:300px;
}

.col-right{
   display: inline-block;
   width:600px;
}

html

<div class="container">
    <div class="col-left"></div>
    <div class="col-right">
       <h1>this is my title</h1>
       <p>to reach their Potential</p>
    </div>
</div>

Question:

I am looking to align the image on the left and text on the right in a single line. Additionally, I want the text to be vertically centered with the image. How can I achieve this?

  1. To display them side by side on the same line.

  2. To vertically center-align the text (appearing in the middle position of the image).

htmlcss

Answer №1

This appears to be the solution you’re looking for. See live demo here

.content-wrapper {
    height: 200px;
    padding: 20px 0;
}
.side-bar {
    display: inline-block;
    background-image:url("http://www.example.com/image.png");
    height:180px;
    width:250px;
    vertical-align:middle;
}
.main-content {
    display: inline-block;
    width:550px;
    vertical-align:middle;
}
.main-content h2, .main-content p {
    margin:0;
}

Answer №2

Upon reviewing your inquiry, it appears that utilizing the Float property may be the solution to your issue. Float operates similarly to inline-block. For more detailed information on this topic, you can refer to the following URL:

Based on my understanding of the matter, I recommend implementing the following solution. Hopefully, this will resolve your concern.

CSS:

.container {width:100%;height: 250px;padding 10px 0;}
.col-left {float:left;background-image:url("support.png");height:235px; width:30%;}
.co-right {float:left;width:70%}

JSFiddle: http://jsfiddle.net/ugQCU/

Answer №3

Take a look at this code snippet to achieve the desired result. I have included a div for vertical alignment. Give it a try and let me know how it works for you. Here is the HTML code

<div class="container">
   <div class="col-left"></div>
    <div class="col-right>
        <div class="col-right-wrap">>
            <h1>this is my title</h1>
            <p>to reach their Potential</p>
        </div>
   </div>
</div>

And here is the CSS 

.container{
    height: 250px;
    padding 10px 0;
}
.col-left { 
    float:left; /*give a direction where you want */
    display: inline-block;
    background-image:url("images/support.png");
    height:235px; 
    width:300px; 
}
.col-right {
    float:left; /*give a direction where you want */
    display: inline-block;
    width:600px;
}
/* align however you want adjust this below code according to you */
.col-right-wrap{
    display:table-cell; 
    vertical-align:middle;
}

Answer №4

If you're looking for something similar to what you need, consider the following setup:

HTML:

<div class="wrapper">
    <div class="left-column">
        <img src="http://placehold.it/300x235" />
    </div>
    <div class="right-column">
         <h1>My Title</h1>

        <p>Striving for success</p>
    </div>
</div>

CSS:

.wrapper {
    width: 100%;
    height: 250px;
    padding: 10px 0;
}
.left-column {
    float: left;
    background-image: url("bgimage.png");
    height: 235px;
    width: 300px;
}
.right-column {
    float: left;
    width: 600px;
    padding-top: 50px;
}

VIEW LIVE DEMO

Note that I used padding for text placement, which may not be optimal in all cases.

Answer №5

Utilizing HTML and CSS together:

.wrapper {
position: relative;
height: 340px;
padding: 15px 0;
}
.left-side {
position: absolute;
background-color: #BBB;
height: 340px;
width: 400px;
}
.right-side {
display: table-cell;
vertical-align: middle;
height: 340px;
padding-left: 410px;
}

See it in action: http://jsfiddle.net/psTCm/5/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the malfunction of the ::after selector in my code?

I am currently utilizing bootstrap 4 in my code and have implemented the following ::after styling for certain elements: .navbar-light .navbar-nav > li >a::after{ content: " "; height: 50px; width: 10%; background-image: linear-gradi ...

htmlcssbootstrap-4

Using Conditional Tags for CSS Display

I'm working on implementing Conditional Tags to toggle a CSS class on or off based on the current displayed page. However, I'm running into an issue where the code isn't executing properly. There might be a syntax or logic error causing the ...

phpcssif-statementconditional-statements

New to CSS/Ruby - What causes two adjacent buttons to have varying sizes?

The varying sizes of my search and login buttons located beside each other are puzzling me. Could it be due to the fact that the search button is enclosed within a submit_tag argument while the login button is not? If this is indeed the case, how can I mak ...

htmlcssruby

Issue with table sorting functionality following relocation of code across pages

I had a working code that I was transferring from one webpage to another along with the CSS and JS files, but now it's not functioning properly. <head> <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}assets/css/style.css"> ...

javascriptjqueryhtmlcssdjango

Dropping challenging shapes in a block-matching game similar to Tetris

I'm currently working on a game similar to Tetris, but with a twist. Instead of removing just one line when it's full, I want to remove all connected pieces at once. However, I've run into a roadblock when trying to implement the hard-drop f ...

javascripthtmlgame-physicstetris

How to append a CSS class with JavaScript without removing existing classes

Utilizing a ddsmoothmenu involves dynamically adding a class name to the parent menu container through the plugin. Once applied, all CSS rules will also affect the menu. Below is an example of how the classname is passed: <div id="myMenu"> <ul ...

javascriptjquerycssmenu

A step-by-step guide on using a loop to display three images per row

The issue at hand is quite logical... I'm attempting to create a photo gallery by fetching image URLs from a database... The problem arises when I try to display them in HTML. I'm using bootstrap for the layout, where each row should contain 3 im ...

phphtmlbootstrap-4logic

Creating functional dropdown menus with popperjs in the latest Bootstrap version 5

Currently, I am attempting to implement dropdown menus in Bootstrap 5. According to my research, this feature requires Popper.js integration, but I am uncertain of the correct way to include it in my Laravel project that utilizes Laravel Mix. I have made ...

javascriptcsslaravelpopper.jsbootstrap-5

Rearranging the Foundation Grid by incorporating smaller panels ahead of larger panels

I am in the process of designing a visually appealing webpage with no text other than captions. To achieve the desired look, I aim to have each clickable box display in a unique size. Here is the layout I envision: __________________________ | ...

htmlcssresponsive-designzurb-foundation

Print a table in PHP with a horizontal layout

I've been at this for hours and can't seem to figure it out. Hopefully someone out there can lend a hand. The code below is echoing the result in a table vertically, but I really need the cells to be next to each other horizontally. Any advice o ...

phpmysqlcss

CSS: The button appears to be slightly lower than the label

For more information, check out this GitHub link Here is the HTML code snippet: <div class="col-md-12"> <div class="col-md-2"> Processing </div> <div class="col-md-4"> <button class="btn btn-primary">Hello</ ...

csstwitter-bootstrap

What is the best way to adjust the size of a column when hovering

What I am attempting to achieve is, I would like the column box to have a 100% width, and when it is hovered over, I want it to transition to the left, with the width of the column box being about 60%, revealing a second block that shows up as 20% width o ...

jqueryhtmlcsshover

Tips on toggling the visibility of a div using jQuery and CSS via a toggle switch

Hey there, I need some help with toggling the opening and closing of a div when clicking on a toggle switch. $('.tog').on('click', function() { $('.cntr').show(); }); .switch { position: relative; display: inline-bloc ...

jqueryhtmlcss

What is the most effective way to create a live preview using AngularJS and CSS?

Is there a way to dynamically change the background color of the body based on the hexadecimal value entered in a textfield, without using jQuery? I want the change to happen live as the user types. The current code works but it doesn't feel right. I ...

javascriptjqueryhtmlcssangularjs

I am looking to automatically add a line of HTML text to the notifications list without requiring the user to manually refresh the page

Having trouble articulating the correct term or language I need, making it difficult to search. Q: How can I push a line of text from the server side to the user? I am developing an MVC 4 application using asp.net and c# in .net4. One page will feature a ...

htmlajaxasp.net-mvcupdatepanelpush

The absence of shapes in containers is noticeable in the stage setting

After spending some time troubleshooting the issue, I have encountered a problem with my code on JSFiddle Code. My goal was to place one large container on the stage that contains two smaller containers, each holding a shape. However, despite no errors bei ...

javascripthtmlcontainersshapeseaseljs

Obtain the clicked href value and pass it from one page to another

Welcome, everyone, I am currently in the process of creating a webpage that serves the following functions: When the administrator accesses the page, they will see a form populated with information fetched from a database: https://i.sstatic.net/RrE9l.png ...

javascriptphpjqueryhtmlmysql

The data input from the HTML is not being correctly transferred to the modal

I am trying to transfer the reservation id from an HTML element to a modal window. When I click "cancel" next to a reservation, a modal should appear showing the reservation id. However, the modal pops up without displaying the reservation id. Can anyone h ...

javascripthtmljquerymodal-dialog

Increase the character count when two spans contain data

I am currently working with the code provided below. The user interface allows users to choose either a single date or a range of dates. These dates are displayed within span tags, with a "-" symbol intended to be shown if there is a valid toDate. However, ...

javascripthtmlangularjs

Position the AdMob banner at the bottom of the page

I am attempting to place an AdMob banner at the bottom of my page, but the Ad is not appearing. There seems to be space allocated for it, but the AdMob banner is not displaying. Include and reference the Google Play services library. - CONFIRMED Add a me ...

androidcssadmobandroid-linearlayout