Ways to align an image at the center within a Span

How can I horizontally center an image within a <span> element?

https://i.sstatic.net/40IL0.png

<div class="col-1">
     <span class="dot">
           <h:graphicImage library="imgs" name="campus.png" width="25" height="25" style="align-content-center"/>
     </span>
</div>

dot css

.dot {
     height: 75px;
     width: 75px;
     background-color: #bbb;
     border-radius: 50%;
     display: inline-block;
}

No need to be concerned about the usage of h:graphicImage, as it is a tag specific to JSF that gets translated to <img> in html. Any html class can still be applied to it.

The implementation includes Bootstrap 4.3.

htmlcssbootstrap-4

Answer №1

To center the dot element, use Display Flex along with align-items and justify-content properties set to center.

.dot {
 height: 75px;
 width: 75px;
 background-color: #bbb;
 border-radius: 50%;
 display: flex;
 align-items:center;
 justify-content:center;

 }

Answer №2

.circle {
     display: block;
     margin-left: auto;
     margin-right: auto;
}

<div class="container">
<div class="row">
  <div class="col-sm-4"></div>
  <div class="col-sm-4"><img class="circle" src="campus.png"/></div>
  <div class="col-sm-4"></div>
</div>

Answer №3

After attempting to leave a comment with no success, I resorted to coding a solution using the position: absolute property. Here's my code snippet for reference:

.dot {
  height: 75px;
  width: 75px;
  background-color: #bbb;  
  border-radius: 50%;
  display: inline-block;
}

.campus {
  position: absolute;
  top: 11.5%;
  left: 8%;
  transform: translate(-50%, -50%)
}
<div class="col-1">
     <span class="dot">
           <img src="https://pngimage.net/wp-content/uploads/2018/05/campus-png-5.png" width="25" height="25" style="align-content-center" class="campus"/>
     </span>
</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

Choosing one item from an array to showcase in a view [Angular]

I've previously inquired about this issue without success. My current challenge involves a store app created with AngularJS. I am trying to implement a feature where clicking on an item will open it in a separate "item" view, displaying only the info ...

javascripthtmlarraysangularjs

Extracting Text from a Span Element Using XPath in Selenium

Here is the HTML code snippet: <div class="a-row a-spacing-small a-size-small"> <div class="a-row"> <a class="a-link-normal a-declarative g-visible-js reviewStarsPopoverLink" href="#" data-action="a-popover" data-a-popover="{"closeButton":" ...

javacssseleniumxpath

Error in Javascript: Null Object

I have created an upload page with a PHP script for AJAX, but I'm encountering errors in Firebug. Also, the upload percentage is not being returned properly. Currently, I can only do one upload in Firefox and the script doesn't work in Chrome. H ...

phpjavascripthtmlajaxupload

Executing a function on each page within the head tag in Nuxt.js

I successfully made my function accessible by using the plugin attribute in the nuxt.config.js file, allowing me to call the function under mounted on every page. I am looking for a more efficient way to run this function within the head tag and have it b ...

javascripthtmlcssvue.jsnuxt.js

When implementing the "box-sizing: border-box" reset, the layout may become distorted if the image height is specified in percentage

I am facing an issue with my header containing a logo when I apply the box-sizing: border-box reset. Here is the functional header: .header-container { height: 60px; width: 100%; background-color: #333333; color: white; display: flex; justif ...

htmlcss

Side navigation in Angular is not causing the main content to shrink

In my layout, I have a container that includes two sidenavs and multiple tables in between them. When I toggle the left sidenav, instead of the expected behavior where the content shrinks to accommodate the sidenav, the tables get pushed to the right as if ...

htmlcssangularcss-grid

Attempting to reach <p> from numerous web pages

Currently, I am working on a project where I need to extract text data from various websites. I have successfully managed to retrieve the text data using <p> tags. I would really appreciate any assistance with this task. Thank you! ...

javascriptpythonhtmlcsspython-3.x

Emphasizing buttons that are in a "pressed" or "inactive" state

I've implemented three push buttons in my code using input with type="button", which act as toggle buttons (on/off). In the past, I used images to indicate when a button was pressed or reset, but now I want to achieve this effect using CSS. However, ...

cssformsbutton

Is it possible to automatically refresh a webpage with the same URL when accessed on the same server?

Is there a way to trigger a URL page refresh using JS code located on the same server? For example, I have a URL page open on multiple devices connected to the same server. How can I ensure that when I click 'Update,' the page refreshes simultan ...

javascriptphpjqueryhtml

Tips for keeping a video background stationary while allowing the text to move smoothly

When I added the video for the background, it only appears at the top of the page. However, I want it to be visible as the rest of the page is scrolled. <div class="hero"> <video autoplay loop muted plays-inline class="back-video&qu ...

javascripthtmlcssfrontendweb-deployment

Having trouble making a Bootstrap 4 input-group with beta 3 prepend/append function properly

When working with Bootstrap 4 Beta 3, I encountered some challenges with the Beta 3, particularly with the input-group-append and input-group-prepend classes. I struggled with placing these classes at the end of my input group. The last button in my inpu ...

htmlbootstrap-4

:root variables not being recognized in SCSS and Vue3 with Vite

I am encountering an issue with setting variables in my root SCSS file, as they are not being recognized correctly. Within my Vite configuration, I have included the following to import my styling: css: { preprocessorOptions: { scss: { additio ...

cssvue.jssassvuejs3vite

An issue occurred while the request was being transported or processed, resulting in Error code 10 at Path /wardeninit

Currently, I am attempting to pass an object (specifically the contents of a row from a sheet) to an apps script template. The screenshot displays the actual row. https://i.stack.imgur.com/IzMrn.png The function in my apps script consists of the followin ...

htmlgoogle-apps-scriptweb-applicationsgoogle-sheets

What is the best way to adjust a 1px margin in Google Chrome?

Check out this example http://jsbin.com/oqisuv/ CSS body { background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y; } .menu { width:989px; margin:auto; height:100px; background:#666666; line-height:100px; text-ali ...

htmlcssgoogle-chrome

CSS Mouse Out Hover Effects with Long Duration

The CSS effect in the codepen below showcases a hover feature where the image grows when hovered over and gradually decreases back to its original size when the mouse is moved away. However, I am looking to change this decrease so that it happens instantly ...

htmlcss

What could be causing my Codepen code to malfunction?

I've transferred the code from CodePen to Atom and saved it. Even though I have added the jQuery script and linked the stylesheets correctly, my local page is still displaying differently. Codepen - http://codepen.io/jordan_miguel/pen/gLwJRb Browser ...

jqueryhtmlcss

What is the process for creating an animation with a filter or toggle effect?

I am eager to create an interactive animation for my search engine on my website, but I'm struggling with where to begin. Here is the relevant HTML snippet: <div id="companyRoster" class="companyRoster container"> <div class="row mb-2"& ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Form created with Bootstrap is not properly aligned in the middle of the div

I have a Bootstrap form with two fields that I've styled using the .d-inline-block class to align them side by side. However, I have another field that is not styled and should appear below the first two, but I'm struggling to center it within th ...

htmlcsstwitter-bootstrap

Add HTML content individually to each item in the array

I am currently developing a plugin and I need to load a preset in order to populate a form with the relevant data. In an attempt to write concise code, I created a variable called "template" that looks like this: var Fields = '<div c ...

javascriptjqueryhtml

Grabbing the mouse in Firefox

Are there any alternatives to the .setCapture(); and .releaseCapture() functions in Firefox that do not involve using jQuery? (The client prefers not to use it) ...

javascripthtml