Simple 3-column grid design in HTML and CSS

My task is to design a 3-grid layout that resembles the following structure:

 -------------------------------------
|  Image  | The name of logo      | > |
 -------------------------------------

I attempted this using the code below: 

<div class="panel panel-default">
   <div class="card-header">
      <a class="card-link row" href="/webview/topup">
        <p style="font-size: 14sp; margin-bottom: 0">
          <img src="../images.png" th:src="@{../images/image.png}" width="10%" 
            height="10%" style="vertical-align: middle; font-family: 'Barlow', sans-serif;">
          The name of logo 
          <img src="../arrow.png" th:src="@{../arrow.png}" width="2%" height="2%"
           style="vertical-align: middle;" align="right";>
        </p>
      </a>
    </div>
  </div>

However, I'm facing an issue with centering the arrow as it is currently aligned to the right only. How can I achieve both right alignment and centering for the arrow?

Apologies for my beginner questions in HTML/CSS. Thank you.

htmlcssbootstrap-4

Answer №1

There are various approaches to accomplish this task.

One option is to utilize flexbox on the parent element:

{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

Additionally, you can include:

{
  margin-left: auto;
}

for the final child element, such as the arrow in your scenario.

If you are looking for a comprehensive overview of flexbox, I recommend checking out this resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

To see how this works with your specific code, here is an example:

.card-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.arrow {
  margin-left: auto;
  width: 1em;
  height: 1em;
}

.logo {
  width: 2em;
  height: 2em;
}

img {
  width: 100%;
  height: auto
}
<div class="panel panel-default">
 <div class="card-header">
  <a class="card-link row" href="/webview/topup">
    <img class="logo" src="https://via.placeholder.com/150">
    <p class="text">The name of logo </p>
    <img class="arrow" src="https://via.placeholder.com/150">
   </a>
  </div>
</div>

Answer №2

Incorporating the use of css "grid" or "flex" can help achieve this task effortlessly. There are numerous resources available on 'css flex' and 'css grid' that provide insights on how to align items in both horizontal and vertical orientations. Additionally, there are several methods to align items within a grid layout, making it a suitable solution for your specific scenario.

.grid {
  display: grid;
  height: 100px;
  background-color: #f9f9f9;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 20px;
}
<div class="grid">
  <div>Image</div> 
  <div>The name of logo</div>
  <div>></div>  
</div>

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

Encountering an issue with ng serve following the update of Angular, Material, and Bootstrap

Here is the package.json configuration: angular: 5.2.8 angular material : 5.1.1 angular/cli: "~1.7.3" bootstrap: "~4.0.0" Encountering an error while running ng serve: ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader?? embedded!./nod ...

angularthemesbootstrap-4angular-materialangular-cli

Site with Three Steady Columns

While I know that this question has been asked in the past, I'm eager to see if there have been any recent changes. I am currently searching for a fixed 3 column layout using html/css, with the main content (middle) area being located first in the DO ...

htmlcsslayoutseo

Utilizing deployJava.runApplet for precise element targeting

After years of successfully maintaining an applet that utilizes the traditional: <script src="foo.js"></script> method for embedding a Java applet, we can no longer ignore the need for change. It's time to switch to: deployJava.runAppl ...

javajavascriptcssapplet

What are some strategies to avoid render-blocking when CSS is loaded through HTML Imports?

I am in the process of developing a website using Web Components and Polymer, with assets being loaded through HTML Imports. This is an example of my markup: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> < ...

csspolymerweb-componentpagespeedhtml-imports

Tips for including information in a chart

I'm facing an issue with my current code as it is not functioning properly. Here is the link to the current output: http://jsfiddle.net/4GP2h/50/ ...

javascriptjqueryhtml

Tips for querying multiple elements that share a common ID and verifying if the input has been modified

I have a series of text inputs that share a common id prefix but differ slightly at the end. Whenever a user enters text in any of these input fields, I want to trigger a function. Currently, I have this functionality implemented with the following code: ...

javascriptjqueryhtmldom

Update the form action URL when a specific option is selected from the dropdown menu upon clicking the submit

I would like my form to redirect to a specific page on my website based on the selection made in the <select> tag. For instance, if '2checkout' is selected, it should go to gateways/2checkout/2checkout.php. Similarly, if 'Payza' i ...

javascriptphpjqueryhtmlforms

How can I apply a blurred effect to the background image of a jumbotron in Bootstrap-vue without affecting the clarity of the text overlay

I need help figuring out how to blur the background image of my jumbotron without blurring the text on top. <b-container fluid class="text-center"> <div> <b-jumbotron class="jumbotron"> <p style=& ...

cssvue.jsbootstrap-4bootstrap-vue

Excessive whitespace appearing on the right side of a Wordpress website

Currently, I am working on a project with a WordPress website that is using the TwentyFourteen theme. As I was going through the site, I noticed an unexpected white margin on the right side of the page extending about 200px in width. Upon inspecting it fu ...

csswordpress

Utilize a variable within an HTML attribute

Currently utilizing Angular and I have the following HTML snippet <input onKeyDown="if(this.value.length==12 && event.keyCode!=8) return false;"/> Is there a way for me to incorporate the variable "myNum" instead of the ...

javascripthtmlangular

What is causing the left-to-right scrollbar in this Bootstrap template?

Currently delving into the realm of Bootstrap 4, I decided to experiment with creating a personal study template using this technology. However, after implementing the code, I noticed an unexpected left-to-right scrollbar appearing when viewing the website ...

htmlbootstrap-4

Insert this HTML table along with radio buttons into an Excel spreadsheet

My HTML table contains rows with a variety of content, including plain text characters and elements like radio buttons and lists. I want users to be able to copy-paste the table into MS Excel as plain text and have the radio button values replaced with "c ...

javascripthtmlexcel

Navigating to different sections of a single page using Bootstrap

I'm feeling a bit lost when it comes to understanding how linking to an element within a page functions. As I delve into the starter template for Twitter Bootstrap, I encounter the following code snippet in the navbar: <ul class="nav navbar-nav"&g ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

The scrolling feature induces a contraction to the left side

Recently, I implemented the code below to fix my menu when scrolling the page: var num = 5; $(window).bind('scroll', function () { if ($(window).scrollTop() > num) { $('.scroll').css({'position':'fixed&apo ...

javascriptjqueryhtmlcssposition

What is the best way to display rows in alternating red and green colors?

Currently, I am implementing the react table in my React project. I found valuable resources on how to use it at these links: https://github.com/tannerlinsley/react-table/tree/v6#codesandbox-examples and also here: https://www.npmjs.com/package/react-tab ...

cssreactjsreact-table

Copy and paste content from Outlook, Word, or any Office software directly into the embedded browser

Our application is performing well, but there is an issue with some users copying text to Word before pasting it into the app. The HTML gets parsed out somewhat correctly, but it often includes tags from outlook or word that our XHTML engine doesn't r ...

htmlms-office

What could be causing issues with the JQuery .Resize() function?

I'm attempting to create a responsive layout where the content div adjusts itself when the user resizes the page. The top and bottom divs are static, so only the content div changes its size based on the page flow. $(window).resize(function() { v ...

jquerycss

Generate a dynamic image using CSS and either a div or a span tag

My image is intricately carved into several slices. You can view it here <!--Force IE6 into quirks mode with this comment tag--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d ...

csshtml

When there is an absence of data, the jQuery datatable mysteriously van

I have encountered an issue in my Django app where a datatable used in the template disappears if there is missing data in any column or row. The problem occurs when trying to download the data in CSV, Excel, PDF, or copy format. Here is the HTML code snip ...

javascriptjqueryhtmldjango-templates

SoundCloud and Vimeo have the capability to link their players across separate tabs, and even between tabs and embedded players

I find it intriguing how SoundCloud and Vimeo are synchronized with their tabs, so that when you play something in one tab, the others pause. It's worth noting that this feature only works on SoundCloud when two instances of the website are open, wher ...

javascripthtmlaudiovideosoundcloud