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

What is the best method to apply a background image in HTML that functions properly in Internet Explorer?

Having trouble getting this CSS code to work in Internet Explorer. Need a solution that is compatible with IE for setting the background. body { background: url("images/Login-BG.png") no-repeat center center fixed; -moz-background-size: cover; -webkit ...

htmlcssinternet-explorer

Vuetify vueJS dialog with elevated design

Is there a way to completely remove the elevation of a v-dialog so that it has no shadow at all? The elevation property in the v-dialog itself and using the class as Class = "elevation-0" have not worked for me. Here is the link to the component ...

htmlcssvue.jssassvuetify.js

Tips for integrating CSS keyframes in MUI v5 (using emotion)

Hey there! I'm currently working on adding some spinning text, similar to a carousel, using keyframes in my React app. The setup involves MUI v5 with @emotion. Basically, I want a "box" element to show different words every few seconds with a rotating ...

javascriptcssreactjsmaterial-uiemotion

Does Xamarin.Forms have a feature similar to html datalist that enables the selection of predefined values while also allowing for the input of free text?

We are currently developing a Xamarin forms application. One of the necessary features is a selection field where users can either choose from predefined options or enter their own text value, similar to using a text field. In HTML, this could be easily ...

androidhtmliosxamarin.formscontrols

Toggle visibility of a div with bootstrap checkbox - enforce input requirements only if checkbox is marked

Lately, I've been facing a strange issue with using a checkbox that collapses a hidden div by utilizing bootstrap. When I include the attribute data-toggle="collapse" in the checkbox input section, the div collapses but it mandates every single one o ...

javascriptjqueryhtmlinputtwitter-bootstrap-3

What is the best way in jQuery to display a particular div with a unique id when a link is clicked?

I have a div with the following structure: <article id="#pippo">blablabla</article> which I have hidden using jQuery $('article').hide(); Now, I want to create a link menu that displays a specific article id when it's clicked ...

javascriptjqueryhtmlhyperlinkcss-selectors

Cypress has the ability to exclude certain elements from its testing

How do I locate a clickable element using the cypress tool? The clickable element always contains the text "Login" and is nested inside the container div. The challenge lies in not knowing whether it's an <button>, <a>, or <input type=& ...

javascripthtmltypescripttestingcypress

stop an html page from opening a new window

When using my HTML-based application, there are instances when it needs to open another URL within an iframe. However, a problem arises when the third-party URL within the iframe also opens a new window with the same content and URL. How can I prevent th ...

javascripthtmliframe

"Keeping your HTML content up-to-date with AngularJS dynamic updates

I've noticed that when I upload changes to my AngularJS HTML partial files, there is a caching issue where the old data is displayed. It takes a few refresh actions before the changes become visible. Is there a way to make these changes appear immedi ...

javascripthtmlangularjs

How can one generate an HTML element using a DOM "element"?

When extracting an element from an HTML page, one can utilize a DOM method like .getElementById(). This method provides a JavaScript object containing a comprehensive list of the element's properties. An example of this can be seen on a MDN documentat ...

javascripthtmldom

Ensuring the authenticity of user login credentials

I have a form in my HTML where the user needs to input their name and password. <html> <body> <form action="welcome.php" method="post"> Name: <input type="text" name="name"><br> Password: <input type="text" name="password ...

phphtml

What methods are available to keep a component in a fixed position on the window during certain scrolling intervals?

I need help creating a sidebar similar to the one on this Airbnb page. Does anyone have suggestions for how to make a component stay fixed until you scroll past a certain section of the page? I am working with functional React and Material-UI components, ...

cssreactjstypescriptmaterial-uifrontend

When dynamically adding input fields in Bootstrap, there is a smaller gap between inline inputs

When adding a new list item dynamically in a modal using jQuery append, the spacing in the first li element seems to have a larger gap between the input fields compared to the rest that are added later. Even after checking the developer tools and confirmin ...

javascripthtmlcsstwitter-bootstrapbackbone.js

Issue with the Styled Components Color Picker display

For the past 6 months, I have been using VSCode with React and Styled Components without any issues. However, recently I encountered a problem where the color picker would not show up when using CSS properties related to color. Usually, a quick reload or r ...

javascriptcssreactjsvisual-studio-codestyled-components

Tips for switching a group of buttons within a userscript by clicking a single button?

Apologies if my wording is not clear, allow me to clarify. I am in the process of developing a userscript that will display a set of buttons below a main button when clicked. These additional buttons will serve different functions and should disappear whe ...

javascripthtmljquerycssuserscripts

I'm trying to access my navigation bar, but for some reason, it's not allowing me to do so

Having trouble getting the navigation bar to open. I have set it up so that when clicked, it should remove the hide-links tag, but for some reason, it does not toggle properly and keeps the ul hidden. import React from "react"; import { NavLink } ...

javascriptcssreactjsnavigation

Adjusting the text color of cells in a table based on their values using Ruby on Rails

I have a cell within a table that is formatted like this: <td><%= play_result.timestamp.strftime("%H:%M:%S") + ' ' + play_result.status + ':' + ' ' + '[' + play_result.host + ']' + ' ' ...

cssruby-on-rails

The Bootstrap DateTimePicker is displaying on the screen in an inaccurate

I'm having an issue with the datetimepicker on my project. The calendar appears incorrectly in Chrome, but looks fine in Edge. Here's a screenshot from Chrome: https://i.stack.imgur.com/Hi0j4.png And here is how it looks in Edge: https://i.stac ...

c#htmlcsstwitter-bootstrapasp.net-core-mvc

The presence of concealed cells within an HTML table is leading to an increase in the

I am currently working on an HTML Table that serves as a summary table for displaying a list of items. The table has 4 visible columns out of approximately 20, with the remaining columns set to display: none;. However, the hidden cells are causing the rows ...

htmlcss

Using Angular 2 to assign unique ids to checkbox values

Is there a way to retrieve the value of a checkbox in Angular 2 without needing an additional Boolean variable? I am trying to toggle the enabled/disabled state of an input field based on the selection of a checkbox. While I know this can be accomplished ...

htmlangular