From 845691f33fb53703a54d3eb1478bb1d1b7c540d2 Mon Sep 17 00:00:00 2001
From: h-yoshikawa44 <43331308+h-yoshikawa44@users.noreply.github.com>
Date: Thu, 16 Dec 2021 13:45:36 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=B4=B0=E3=81=8B=E3=81=AA=E3=82=B9?=
 =?UTF-8?q?=E3=82=BF=E3=82=A4=E3=83=AB=E8=AA=BF=E6=95=B4(#29)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/myProducts/index.js             |  4 ++--
 src/pages/skillAndCareer/index.js         | 10 +++++-----
 src/pages/skillAndCareer/index.module.css | 11 ++++++++++-
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/pages/myProducts/index.js b/src/pages/myProducts/index.js
index 776d2be..3a1c065 100644
--- a/src/pages/myProducts/index.js
+++ b/src/pages/myProducts/index.js
@@ -18,13 +18,13 @@ function Product({ productName, description, imageUrl, url, githubUrl }) {
   return (
     <div className="col col--4 margin-bottom--lg">
       <div className="card shadow--lw-custom">
-        <div className="text--center card__image">
+        <p className="text--center card__image">
           <img
             src={useBaseUrl(imageUrl)}
             alt={productName}
             className={styles.productImg}
           />
-        </div>
+        </p>
         <div className={clsx('card__body', styles.cardBodyCustom)}>
           <h4>{productName}</h4>
           <small>{description}</small>
diff --git a/src/pages/skillAndCareer/index.js b/src/pages/skillAndCareer/index.js
index 18d9ae2..b45c52d 100644
--- a/src/pages/skillAndCareer/index.js
+++ b/src/pages/skillAndCareer/index.js
@@ -21,14 +21,14 @@ Skill.propTypes = {
 
 function Skill({ imgUrl, title, description }) {
   return (
-    <div className="col col--3">
+    <div className="col col--3 text--center">
       {imgUrl && (
-        <div className="text--center">
+        <p className={styles.skillImageBlock}>
           <img className={styles.skillImage} src={imgUrl} alt={title} />
-        </div>
+        </p>
       )}
-      <h4 className="text--center">{title}</h4>
-      <p className="text--center">{description}</p>
+      <h4>{title}</h4>
+      <p>{description}</p>
     </div>
   );
 }
diff --git a/src/pages/skillAndCareer/index.module.css b/src/pages/skillAndCareer/index.module.css
index 14ff861..d5fb1b2 100644
--- a/src/pages/skillAndCareer/index.module.css
+++ b/src/pages/skillAndCareer/index.module.css
@@ -1,4 +1,13 @@
-.skillImage {
+.skillImageBlock {
   height: 100px;
   width: 100px;
+  margin: 1em auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.skillImage {
+  max-width: 100%;
+  max-height: 100%;
 }