Is there a way I can align these items in the center of the span?

Issue at Hand:

The SVG and text elements are not aligning to the center of my spans as desired.

Attempts Made:

I have experimented with different display modes, used margin properties for alignment, and tried adjusting text-align. I even searched for solutions on stackexchange, but unfortunately, none of them have resolved the issue.

JSFIDDLE

.knowledge-container {
  margin: auto;
  margin-top: 3vh;
  width: 95%;
  padding: 5px;
  text-align: center;
}

.knowledge-box {
  margin: 5px 0.5vw 0px 0.5vw;
  height: 10vw;
  width: 10vw;
  border: 4px solid white;
  border-radius: 15px;
  background-color: none;
  display: inline-block;
  overflow: hidden;
}

.knowledge {
  width: 100%;
  height: 100%;
}

.knowledge span {
  display: block;
}

.knowledge-box #topic-logo {
  height: 85%;
  width: auto;
  background-color: pink;
}

.knowledge-box #topic-desc {
  height: 15%;
  width: auto;
  text-transform: uppercase;
  font-size: 100%;
  background-color: violet;
}

.knowledge svg {
  fill: white;
  width: auto;
  height: 90%;
  width: auto;
  margin: auto;
  padding-top: 15px;
}
<div class="knowledge-container">
  <div class="knowledge-box">
    <div class="knowledge">
      <span id="topic-logo"><svg></svg></span>
      <span id="topic-desc">Language</span>
    </div>
  </div>
</div>

htmlcss

Answer №1

To address your problem, you can utilize top and transform: translateY(). If you're not familiar with transform and translate, you can learn more about them here and here.

According to the MDN documentation:

The translate() CSS function adjusts the position of an element on the plane by a specified vector.

Solution

Please refer to this updated fiddle.

Add these CSS properties to your <svg>:

.knowledge svg {
  ...
  top: 50%;
  position: relative;
  transform: translateY(-50%);
}

For your topic-desc, include another <span> inside and apply the same rule:

.knowledge span span {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Demo

You can view the outcome by running the demo below.

.knowledge-container {
  margin: auto;
  margin-top: 3vh;
  width: 95%;
  padding: 5px;
  text-align: center;
}

.knowledge-box {
  margin: 5px 0.5vw 0px 0.5vw;
  height: 30vw;
  width: 30vw;
  border: 4px solid white;
  border-radius: 15px;
  background-color: none;
  display: inline-block;
  overflow: hidden;
}

.knowledge {
  width: 100%;
  height: 100%;
}

.knowledge span {
  display: block;
}

.knowledge span span {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.knowledge-box #topic-logo {
  height: 85%;
  width: auto;
  background-color: pink;
}

.knowledge-box #topic-desc {
  height: 15%;
  width: auto;
  text-transform: uppercase;
  font-size: 100%;
  background-color: violet;
}

.knowledge svg {
  fill: white;
  width: auto;
  height: 90%;
  width: auto;
  margin: auto;
  top: 50%;
  position: relative;
  transform: translateY(-50%);
}
<div class="knowledge-container">
  <div class="knowledge-box">
    <div class="knowledge">
      <span id="topic-logo"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 990 990"><title>Brain</title><path d="M489,124c0-32-13-61-36-83A123,123,0,0,0,368,6h0C301,6,249,57,246,120l-25,5c-58,18-91,75-79,131-15,5-26,14-34,27s-12,47,3,66c-45,17-78,60-78,110a111,111,0,0,0,20,64C24,540,5,569,5,602s26,74,65,87c-7,8-13,15-17,26s-9,42-1,64,45,52,79,52h13a96,96,0,0,0,26,61c20,22,46,34,77,37h17c19,41,60,68,107,68,64,0,115-48,116-110h0V125c1,0,1,0,1-1h0ZM373,968a93,93,0,0,1-81-47c41-14,73-50,77-94,0-8-5-13-12-14s-13,5-11,11c-4,46-45,79-91,77a84,84,0,0,1-58-28c-15-17-23-38-20-60h0c0-3,0-4-1-6s-11-10-17-8c-30,11-65-3-77-32a61,61,0,0,1,0-43q10-21,32-31c7-3,11-10,8-17a15,15,0,0,0-13-8h-3c-38,0-69-29-69-66s30-66,69-66c8,0,13-5,13-13s-5-13-13-13a86,86,0,0,0-25,4,88,88,0,0,1-19-54c0-51,42-92,95-92s95,41,95,92c0,8,5,13,13,13s13-5,13-13c0-65-54-117-122-117H137a1,1,0,0,0-1-1c-13-11-16-31-7-46a38,38,0,0,1,53-13c7,4,15,1,19-5s1-14-5-18-19-8-28-8c-11-45,16-89,61-103,15-4,29-5,42-3,24,4,45,17,58,36,4,6,12,8,19,3s8-11,3-18c-17-24-45-41-75-46h-4c1-50,44-89,95-89h0c25,0,49,10,67,27a89,89,0,0,1,28,65h0V293H350s-24,3-38-10-13-20-13-37-5-13-13-13-13,5-13,13c0,24,8,43,23,56s40,17,52,17H463V422H361c-8,0-13,5-13,13s5,13,13,13H463V560H252s-24,3-38-10-13-20-13-37-5-13-13-13-13,5-13,13c0,24,8,43,23,56s40,17,52,17H464V691H313c-5,0-37-3-58,17s-23,32-23,56c0,8,5,13,13,13s13-5,13-13,4-29,13-37,38-10,38-10H462V881C463,930,422,968,373,968Z" transform="translate(-5 -5)"/><path d="M995,602c0-33-19-63-46-79a111,111,0,0,0,20-64c0-50-32-92-78-110,13-19,16-46,3-66s-21-23-34-27c12-56-21-114-79-131l-25-5c-1-31-13-59-36-80A123,123,0,0,0,632,5h0C565,5,511,57,511,122h0V883h0c1,61,53,110,116,110,46,0,89-27,107-68h17c30-3,57-15,77-37s25-40,26-61h13c34,0,66-19,79-52s5-65-19-88C967,676,995,642,995,602Zm-97,66h-3a15,15,0,0,0-13,8c-3,6,0,14,8,17,30,11,45,45,33,74s-46,43-77,32c-7-3-15,0-17,8s-1,4-1,6h0c1,22-5,43-20,60a84,84,0,0,1-58,28c-48,4-89-31-91-77,0-8-7-13-15-11s-13,6-12,14c4,45,34,80,77,94-15,29-46,47-81,47-50,0-90-40-90-87V717H689s24-3,38,10,13,20,13,37,5,13,13,13,13-5,13-13c0-24-8-43-22-56s-53-17-58-17H537V583H753c12,0,34-3,52-17s22-32,22-56c0-8-5-13-13-13s-13,5-13,13-4-29-13-37-38-10-38-10H538V445H640c8,0,13-5,13-13s-5-13-13-13H538V316H654c12,0,34-3,52-17s22-32,22-56c0-8-5-13-13-13s-13,5-13,13-4,29-13,37-38,10-38,10H538V125h0c0-51,42-92,95-92h0c25,0,49,9,68,27s28,38,28,63h-4c-30,5-58,22-75,46-4,6-3,14,3,18s15,3,19-3c13-19,36-32,58-36a94,94,0,0,1,42,3c-22,8,42,23,53,43s13,40,8,60a113,113,0,0,0-28,8c-7,4-8,11-5,18s12,8,19,5c19-10,42-4,53,13s7,34-7,46a1,1,0,0,-1-1-1H847c-67,0-122,52-122,117,0,8,5,13,13,13s13-5,13-13c0-51,42-92,95-92s95,41,95,92a88,88,0,0,1-19,54,80,80,0,0,0-25-4c-8,0-13,5,13,13s5,13,13,13c38,0,69,29,69,66S937,668,898,668Z" transform="translate(-5 -5)"/>           </svg></span>
      <span id="topic-desc"><span>Language</span></span>
    </div>
  </div>
</div>

Answer №2

Flexbox is a great solution for achieving that! :)

.information span {
  display: flex;
  align-items: center;
  justify-content: center;
}

Answer №3

Try incorporating padding into your design.

.information-container #topic-description {
  width: auto;
  padding:10px;
  text-transform: uppercase;
  font-size: 100%;
  background-color: violet;
}

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

Styling a div element in React

Just dipping my toes into the world of styling here, so bear with me. I'm currently working on a React app and attempting to bring an image from a file using the following code: import cup from './img/cup.png' My goal is to style it in co ...

cssreactjs

Ways to maximize the amount of content contained within a box

My current struggle involves meeting the requirements of my customers. I have a small box (230px x 200px) with an image that will display a list on hover. However, the customer now wants more items in the list than can fit in the box. Scrolling within the ...

javascriptjqueryhtmlcss

choosing a specific element with jQuery to be used for future purposes

I'm having some trouble with the following code snippet: var star = $("._container > favorite"); var symbol = $(star.parentNode.parentNode).attr("symbol"); var exchange = $(star.parentNode.parentNode).attr("exchange"); After running ...

javascriptjqueryhtml

Tips for expanding a fabric canvas to match the entire width of its parent division

specific scenario I have a cloth canvas placed inside a main section. How can I expand the canvas to cover the entire width and height of its container? Here is what my current code looks like: <div class="design_editor_div"> &l ...

javascripthtmlcsshtml5-canvasfabricjs

The vertical baseline alignment is not functioning as expected

In my setup, I have a straightforward configuration: <button> Lorem </button> <input type="text" value="Ipsum"> both positioned side by side with the help of display: inline-block: button, input{ height: 34px; line-height: ...

htmlcss

Dynamically insert ID into a div element

Hi there, I have an ID "network" in the div class "parent". Inside this parent div, there is a for loop that generates multiple IPs. Whenever I click on a specific parent IP, it should call its child div. How can I dynamically generate IDs so that I can pl ...

jqueryhtmljquery-ui

The moving div suddenly halts before continuing its journey

Two overlapping divs create an interesting sliding effect. A gray div slides in from the top over a black div. Hovering your mouse over the black div causes the gray one to slide out of view. If you hover over the gray div, it also slides out but pauses ...

jqueryhtmlcss

Develop a custom dropdown menu using JavaScript

I've been working on creating a dropdown menu that appears after selecting an option from another dropdown menu. Here's the HTML code I'm using: <br> <select id ="select-container" onchange="addSelect('select-container') ...

javascripthtml

Is it possible to personalize the Facebook like box appearance?

Is there a way to modify the number of feeds and enable auto scroll feature in a Facebook likebox? I've been experimenting with the code snippet below but have hit a roadblock. <div id="fb-root"></div><script>(function(d, s, id) {va ...

javascriptjquerycsshtmlfacebook-likebox

Changing the CSS class of the Bootstrap datetime picker when selecting the year

Is there a way to change the CSS style of the Bootstrap datetime picker control so that when selecting years, the color changes from blue to red? I attempted to do this with the following code: .selectYear { background-color:red!important; } However ...

javascripthtmlcsstwitter-bootstrap

Creating a Three-Row Table with Material-UI and React

I am looking to achieve a layout similar to the one shown in the image below: I want to construct a table with three rows, where the third row is positioned below the first and second rows, and the width of the third row is equal to the combined width of t ...

htmlcssreactjsmaterial-ui

Hover function not functioning properly

I can't figure out why this hover effect isn't working, there doesn't seem to be a negative z-index or anything like that. At most, it just flashes on hover; .menu{ border-radius: 50%; width: 100px; height: 100px; background: white; box-sha ...

csshover

Target the first element within a tree structure using CSS

Trying to target the initial blockquote in an email body with varying formats, such as: <div class="myclass"> <br><p></p> <div><div> <!--sometimes with less or more div--> <blockquote&g ...

htmlcss

What is the process for loading this image?

While browsing through this stunning website, I came across a feature that caught my eye. Can someone please explain how the designer displayed the "The magic is loading" effect: The image vanishes once the site has finished loading completely. ...

javascripthtml

Tips for preventing text wrapping in off-canvas design

Seeking advice for my Web Application prototype - looking to prevent text wrapping in off-canvas menu paragraphs using CSS or JS. New to building this type of menu, I used an example from W3Schools to achieve the current design. <!DOCTYPE html> ...

javascripthtmlcss

How to display an image stored in Laravel within a Nuxtjs application?

I'm trying to display all images that are saved in nuxtjs using Laravel's storage feature. <img v-for="(row, index) in files" :src="'storage/' + row" :key="index" alt="" width="150px" ...

htmllaravelvue.jsstoragenuxt.js

Attempting to replicate the flipping motion of a card by applying the transform property to rotate a div element, ultimately revealing a different

I am attempting to create a series of divs that simulate the flipping action of a notecard. Unfortunately, when I hover over the div, it turns white because I have set the display property to none. I am unsure how to make the other div (.back) visible. Y ...

htmlcss

Chrome's XPath attribute selection is not functioning properly

After running a small test with expect.js, here are the results: describe('xpath', function () { it('locates attribute nodes', function () { $(document.body).append('<string fooBar="bar"><data id="xyz">< ...

javascriptgoogle-chromexpathhtml

Using jQuery to make an element follow you as you scroll down a page inside a div

I've made some progress on my code: HTML <div id="header"></div> <div id="content"> <div class="sidebar-wrapper"></div> </div> <div class="session-wrapper"></div> <div id="footer"></div> ...

jqueryhtmlcss

Unable to establish a connection to 'X' as it is not recognized as a valid property

Trying to implement a Tinder-like swiping feature in my Angular project, but encountering an error stating that the property parentSubject is not recognized within my card component. Despite using the @Input() annotation for the property, it still fails to ...

htmlangulartypescript