CSS can be used to strategically place elements on a webpage

I am currently in the process of learning and I am facing some challenges with CSS. My goal is to centrally align all items within a div, as well as align pictures with text and have everything aligned to the left.

HTML

     <div class='SectionTop'>
               <div class='CardVisual'>
                   <p class='CardName'> <img src="templates/img/GlobePic.jpg" alt="" class="Pic"> Countries </p>
                   <p class='CardValue'> {{countryNumber}} </p> 
               </div>
               <div class='CardVisual'>
                   <p class='CardName'> <img src="templates/img/BuildingPic.jpg" alt="" class="Pic"> Customers </p>
                   <p class='CardValue'> {{customerNumber}} </p>
                </div> 
      </div>

CSS

    .SectionTop {
     width: 95%;
     margin-left: 3%;
     margin-right: 3%;
     background-color: white;
     border: 2px solid blue;
     border-radius: 25px;
      }
            
.CardVisual {        
width: 15%;
display: inline-block;
text-align: center;
}
.Pic {
width: 30px;
height: 30px;
object-fit: cover;
margin-left: 20px;
align-items: center;
}
htmlcss

Answer №1

To achieve this layout, you can utilize the display: flex property.

.SectionTop {
  width: 95%;
  margin-left: 3%;
  margin-right: 3%;
  background-color: white;
  border: 2px solid blue;
  border-radius: 25px;
  align-items: center;
  justify-content: center;
  display: flex;
  height: 250px;
}

.CardVisual {
  width: 15%;
  display: inline-block;
  text-align: center;
}
.Pic {
  width: 30px;
  height: 30px;
  object-fit: cover;
  margin-left: 20px;
  align-items: center;
}
<div class="SectionTop">
  <div class="CardVisual">
    <p class="CardName">
      <img src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" alt="" class="Pic" /> Countries
    </p>
    <p class="CardValue">001</p>
  </div>
  <div class="CardVisual">
    <p class="CardName">
      <img src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" alt="" class="Pic" />
      Customers
    </p>
    <p class="CardValue">002</p>
  </div>
</div>

Answer №2

To achieve proper alignment, you can utilize the text-align: center property. It's important to note that without a valid image, it may be challenging to determine your exact requirements.

.SectionTop {
  width: 95%;
  margin-left: 3%;
  margin-right: 3%;
  background-color: white;
  border: 2px solid blue;
  border-radius: 25px;
  text-align: center;
}

.CardVisual {
  width: 15%;
  display: inline-block;
  text-align: center;
}

.Pic {
  width: 30px;
  height: 30px;
  object-fit: cover;
  margin-left: 20px;
  align-items: center;
}
<div class='SectionTop'>
  <div class='CardVisual'>
    <p class='CardName'> <img src="templates/img/GlobePic.jpg" alt="" class="Pic"> Countries </p>
    <p class='CardValue'> {{countryNumber}} </p>
  </div>
  <div class='CardVisual'>
    <p class='CardName'> <img src="templates/img/BuildingPic.jpg" alt="" class="Pic"> Customers </p>
    <p class='CardValue'> {{customerNumber}} </p>
  </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

Are You Able to Develop a Floating Window That Stays Persistent in JavaScript?

Looking to create a persistent floating window in a NextJS 14 app. This window needs to remain on top, even when navigating between browser windows. Want it to stay visible even when the browser window is minimized, like a Picture-In-Picture feature. Mos ...

javascriptcssnext.jselectronpicture-in-picture

Experimenting with creating collapsible panels using Bootstrap/CSS can result in various outcomes

, I am in the process of constructing a collapsible sliding left panel using bootstrap 5. The progress has been notable, but I am encountering some hurdles. Upon reviewing the code at this link: https://jsfiddle.net/dizzy0ny/86wjas9L/108/, you will witness ...

htmlcssbootstrap-4highchartsbootstrap-5

capture the event when a value is submitted into the input field

One of the challenges I'm facing involves an input field intended for user emails I am trying to capture two specific events from this field using JavaScript The first event is triggered by clicking on the input field itself. The second event I need ...

javascripthtmljquery

Binding iframes in Angular 6

Is there a way to display iframe code stored in a variable within a div? Here's the HTML code: <div class="top-image" [innerHTML]="yt"></div> And here's the TypeScript code: yt = '<iframe class="w-100" src="https://www.you ...

htmlangulartypescriptiframe

Trouble with getElementsByTagName function

Utilizing the NODE JS module, I have created an HTTP server that responds with a page containing JavaScript code to embed a webpage within an <iframe>. Within this <iframe>, I am trying to access its elements using the getElementsByTagName meth ...

javascripthtmlnode.js

JavaScript is not designed to run a second time

Currently, I have a script set up using $(document).ready(). It works perfectly upon initial loading. However, I also need this script to execute whenever the user changes an HTML select control. Ideally, upon page load, I want the filter and sort functio ...

javascriptjqueryhtml

Connect ng-models with checkboxes in input field

I am facing an issue with binding ng-models using ng-repeat in an input checkbox tag. Let me share my code and elaborate further. app/main.html: <div ng-repeat="feature in features"> <input type="checkbox" ng-model="features[$index].name"> ...

javascripthtmlangularjscheckboxangular-ngmodel

use jquery to highlight a table row based on the current hour

Within my HTML structure, there is a table element with the class <table class="model">, and it contains several table data cells with the class class="model-date". The date format within these cells is as follows: DD-MM HH:MM For example, <td ...

jqueryhtmlcss

Even though the if statement has been implemented, the page continues to show null objects

So, I have an if statement that filters out null objects and it's working fine. However, when I try to insert something in join() like join("li"), all null objects are displayed on the page as shown in the image. I just want to display objects that ar ...

javascriptjqueryhtmlcss

Utilizing jQuery to trigger animations when the form is hovered over or when the input box is

I am currently working on implementing opacity effects for an entire form when it is hovered over or when an input box is clicked while the mouse cursor has moved away from the hover area, ensuring that the effect remains visible. Here is the HTML code I ...

jqueryhtmlcss

"Place the content at the center of the row using display block in Bootstrap version

Having modified the bootstrap.min.css file in my Bootstrap v4.3.1, I replaced all instances of display:flex; with display:block;. However, after making this change, I noticed that the rows were no longer centered, even when using justify-content-center. T ...

htmlcssbootstrap-4

Prevent the display of cascading div elements by using JavaScript and jQuery scripting

My webpage performs a simple check to verify if Javascript and cookies are enabled on the client's browser. If they are enabled, the script displays the content inside div id="conteudo" and hides the warning message inside div id="aviso". If not, the ...

javascriptjqueryhtmlcss

I attempted to separate a string containing <br> tags using the explode function, but the method was not successful

In my code, there is a string that looks like this <br> ACCEPT:YES <br> SMMD:tv240245ce <br> This string is stored in a variable called $_session['result'] My task is to extract the following information either as an array or ...

phphtmlstringexplode

Hover Effect: Inner Border Style Applied to Image Using CSS

I've been on the hunt for a straightforward hover effect to use on images in a gallery. I'm looking for something simple that will add a slight 10px width, 40% transparency to the images. While many tutorials show how to achieve this effect on a ...

cssimagehoverborder

I'm encountering an issue where Bulma is taking precedence over the CSS of my Vue3

In my Vue CLI 3 project, I'm utilizing Bulma and have included the import in the 'index.js' file like so: import { createApp } from 'vue' import App from './App.vue' import router from './router' require('@ ...

cssvue.jsvuejs3bulmavue-cli-3

A helpful tip on how to designate a specific color to the helperText in Material UI in order to emphasize

Is there a way to customize the color of helperText in material-UI for highlighting errors in a TextField? I've been struggling to change the color of helperText with no success. I attempted using MuiFormHelperText-root-406 to add CSS styles, but it ...

cssreactjsmaterial-ui

Can we dynamically add an identical DOM structure by clicking a button using jQuery?

I currently have ten text fields within a single div. I am interested in including another set of ten text fields with the same name, class, and id. Is there a way to recycle the existing DOM structure mentioned above, or will I need to generate and add t ...

javascriptjqueryhtmldomelement

Is there a way to customize the design of the "Browse" button within the HTML file upload control?

I've been searching high and low on the internet for a simple, sleek method to customize the appearance of the Browse button on an HTML <input type=file> element. However, all the solutions I've come across involve hiding controls, placing ...

htmlfile-uploadcss

Error message: Unable to access the state property of an undefined object

I've been attempting to integrate a react sticky header into my stepper component. However, I've encountered an issue where it doesn't render when added inside my App.js file. As a result, I've started debugging the code within App.js ...

javascripthtmlreactjsreduxmaterial-ui

Position a <div> element in the center of another <div> element

Link to code: https://jsfiddle.net/z4udfg3o/ My goal is to center the "caixa" divs within the "produtos" div. Initially, I achieved this by using exact values with margin-left. However, I now want it to be responsive across different screen sizes, so I ha ...

htmlcss